質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

1220閲覧

Vue.jsとFirebaseで任意のデータを違う画面に飛ばしたい。

kita_morio

総合スコア18

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/12/17 14:34

前提・実現したいこと

簡単なタスク管理アプリをvue.js(CLI)とFirebaseで作っています

Task.vueには、タスク一覧
detail.vueには、タスクの詳細

という設定にしたいです。

発生している問題・エラーメッセージ

detail.vueに、task.vueに飛ばない

javascript

1<template> 2<div class="task"> 3 4 5 <!-- todoの一覧表示 --> 6 <ul v-for="(todo, key) in todos" > 7 <li><input class="toggle" type="checkbox"> 8 <router-link :to="{ name:'detailtask', params:{ todo:key} }"> 9 {{ todo.name }} 10 </router-link></li> 11 <button type="submit" v-on:click="deleteTodo(key)">削除</button> 12 </ul> 13 </div> 14</div> 15</template> 16 17<script> 18import firebase from "firebase"; 19 20export default { 21 name: "Task", 22 data() { 23 return { 24 database: null, 25 todosRef: null, 26 newTodoName: "", 27 showTodoType: "all", 28 todos: [] 29 }; 30 }, 31 created: function() { 32 this.database = firebase.database(); 33 this.uid = firebase.auth().currentUser.uid; 34 this.todosRef = this.database.ref("todos/" + this.uid); 35 36 var _this = this; 37 38 this.todosRef.on("value", (snapshot) => { 39 this.todos = snapshot.val(); // 再取得してtodosに格納する 40 }); 41 }, 42 methods: { 43 // todoの削除 44 deleteTodo: function(key) { 45 this.todosRef.child(key).remove(); 46 } 47 } 48}; 49</script> 50<style> 51.icon-content{ 52 font-size: 10px; 53 display: block; 54} 55 56li { 57 list-style: none; 58 vertical-align: center; 59} 60 61</style>

javascript

1<template> 2 <div class="task"> 3 <h2>詳細</h2> 4 タスク名:<span>{{ name }}</span> 5 </div> 6 7</template> 8<script> 9import firebase from "firebase"; 10 11export default { 12 name: "DetailTask", 13 data: function() { 14   var index = this.$router.currentRoute.params.todo; 15 var item = this.todo[index]; 16 return { 17 name : item.todo 18 } 19 } 20}; 21</script> 22 23<style> 24</style> 25

javascript

1import Vue from 'vue' 2import Router from 'vue-router' 3import Signup from '@/components/Signup' 4import Signin from '@/components/Signin' 5import Task from '@/components/Task' 6import DetailTask from '@/components/DetailTask' 7import NewTask from '@/components/NewTask' 8import firebase from 'firebase' 9 10Vue.use(Router) 11 12let router = new Router({ 13 mode: 'history', 14 routes: [ 15 { 16 path: '*', 17 redirect: 'signin' 18 }, 19 { 20 path: '/', 21 name: 'task', 22 component: Task, 23 meta: { requiresAuth: true } 24 }, 25 { 26 path: '/newtask', 27 name: 'newtask', 28 component: NewTask, 29 meta: { requiresAuth: true } 30 }, 31 { 32 path: '/detailtask/:todo', 33 name: 'detailtask', 34 component: DetailTask, 35 meta: { requiresAuth: true } 36 }, 37 { 38 path: '/signup', 39 name: 'Signup', 40 component: Signup, 41 }, 42 { 43 path: '/signin', 44 name: 'Signin', 45 component: Signin 46 } 47 ] 48}) 49 50// ログインが完了していない場合にサインインページの飛ばす 51router.beforeEach((to, from, next)=>{ 52 let requiresAuth = to.matched.some(record => record.meta.requiresAuth) 53 let currentUser = firebase.auth().currentUser  54 if (requiresAuth){ 55 if (!currentUser){ 56 next({ 57 path: '/signin', 58 query: {redirect: to.fullPath} 59 }) 60 }else{ 61 next() 62 } 63}else{ 64 next() 65} 66}) 67 68export default router

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

初歩的な質問ですみません。よろしくお願いします!

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問