前提・実現したいこと
簡単なタスク管理アプリを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/ツールのバージョンなど)
初歩的な質問ですみません。よろしくお願いします!
あなたの回答
tips
プレビュー