Q&A
> エラーが出てしまいます。
で、その「エラー」の発生箇所と内容は何なんですか？
まさかこれを全文コピペして実行してエラー内容を確認して回答してくれ、みたいな話ですか？
現在、Vueの勉強をしており、Vue Routerを使ってtodolistを作成しているのですが、
仕組みを理解するためにTodosをconsole.logで見ようとしたのですがうまくconsoleに表示することができません。
ファイル数が多く見にくいと思いますが教えていただけると嬉しいです。
また、ファイル数が多いため独断と偏見で必要そうなファイルをピックアップしていますので、
もしも現状載せているファイルだけでわからない場合はご指摘いただけると幸いです。
↓routes.js
import Todos from 'TodoRouterDir/containers/Todos'; const routes = [ { name: 'allTodos', path: '/', component: Todos, }, { name: 'completedTodos', path: '/completed', component: Todos, }, { name: 'incompleteTodos', path: '/incomplete', component: Todos, }, ]; export default routes;
↓index.vue
<template lang="html"> <app-wrapper :todos="todos"> <app-navi /> <app-register v-if="todoFilter !== 'completedTodos'" :todo-id="targetTodo.id" :todo-title.sync="targetTodo.title" :todo-detail.sync="targetTodo.detail" :todo-rows="rows" @addTodo="addTodo" @editTodo="editTodo" /> <app-error-message v-if="errorMessage" :error-message="errorMessage" /> <template v-slot:todos> <app-list v-if="filteredTodos.length" :todos="filteredTodos" @changeCompleted="changeCompleted" @showEditor="showEditor" @deleteTodo="deleteTodo" /> <app-empty-message v-else :empty-message="emptyMessage" /> </template> </app-wrapper> </template> <script> import axios from 'axios'; import Wrapper from 'TodoRouterDir/components/Wrapper'; import Navi from 'TodoRouterDir/components/Navi'; import { ErrorMessage, EmptyMessage } from 'TodoRouterDir/components/Message'; import Register from 'TodoRouterDir/components/Register'; import List from 'TodoRouterDir/components/List'; export default { components: { appWrapper: Wrapper, appNavi: Navi, appErrorMessage: ErrorMessage, appEmptyMessage: EmptyMessage, appList: List, appRegister: Register, }, data() { return { todos: [], todoFilter: '', filteredTodos: [], targetTodo: { id: null, title: '', detail: '', completed: '', }, errorMessage: '', emptyMessage: '', }; }, computed: { rows() { const num = this.targetTodo.detail.split('\n').length; return (num > 3) ? num : 3; }, }, watch: { $route() { this.setFilter(); }, todos() { this.setFilter(); }, }, created() { axios.get('http://localhost:3000/api/todos/').then(({ data }) => { this.todos = data.todos.reverse(); this.setFilter(); }).catch((err) => { this.showError(err); this.setFilter(); }); }, methods: { setFilter() { const routeName = this.$route.name; this.todoFilter = routeName; if (routeName === 'completedTodos') { this.filteredTodos = this.todos.filter(todo => todo.completed); } else if (routeName === 'incompleteTodos') { this.filteredTodos = this.todos.filter(todo => !todo.completed); } else { this.filteredTodos = this.todos; } if (!this.filteredTodos.length) this.setEmptyMessage(); }, setEmptyMessage() { if (this.todoFilter === 'completedTodo') { this.emptyMessage = '完了済みのやることリストはありません。'; } else if (this.todoFilter === 'incompleteTodo') { this.emptyMessage = '未完了のやることリストはありません。'; } else { this.emptyMessage = 'やることリストには何も登録されていません。'; } }, initTargetTodo() { return { id: null, title: '', detail: '', completed: false, }; }, hideError() { this.errorMessage = ''; }, showError(err) { if (err.response) { this.errorMessage = err.response.data.message; } else { this.errorMessage = 'ネットに接続がされていない、もしくはサーバーとの接続がされていません。ご確認ください。'; } }, addTodo() { if (!this.targetTodo.title || !this.targetTodo.detail) { this.errorMessage = 'タイトルと内容はどちらも必須項目です。'; return; } const postTodo = Object.assign({}, { title: this.targetTodo.title, detail: this.targetTodo.detail, }); axios.post('http://localhost:3000/api/todos/', postTodo).then(({ data }) => { this.todos.unshift(data); this.targetTodo = this.initTargetTodo(); this.hideError(); }).catch((err) => { this.showError(err); }); }, changeCompleted(todo) { this.targetTodo = this.initTargetTodo(); const targetTodo = Object.assign({}, todo); axios.patch(`http://localhost:3000/api/todos/${targetTodo.id}`, { completed: !targetTodo.completed, }).then(({ data }) => { this.todos = this.todos.map((todoItem) => { if (todoItem.id === targetTodo.id) return data; return todoItem; }); this.hideError(); }).catch((err) => { this.showError(err); }); }, showEditor(todo) { this.targetTodo = Object.assign({}, todo); }, editTodo() { const targetTodo = this.todos.find(todo => todo.id === this.targetTodo.id); if ( targetTodo.title === this.targetTodo.title && targetTodo.detail === this.targetTodo.detail ) { this.targetTodo = this.initTargetTodo(); return; } axios.patch(`http://localhost:3000/api/todos/${this.targetTodo.id}`, { title: this.targetTodo.title, detail: this.targetTodo.detail, }).then(({ data }) => { this.todos = this.todos.map((todo) => { if (todo.id === this.targetTodo.id) return data; return todo; }); this.targetTodo = this.initTargetTodo(); this.hideError(); }).catch((err) => { this.showError(err); }); }, deleteTodo(id) { this.targetTodo = this.initTargetTodo(); axios.delete(`http://localhost:3000/api/todos/${id}`).then(({ data }) => { this.todos = data.todos.reverse(); this.hideError(); }).catch((err) => { this.showError(err); }); }, }, }; </script>
↓Navi
<template lang="html"> <div class="todo__link"> <!-- toプロパティに遷移先のパスをバインド --> <router-link class="todo__link__item" to="/">すべて表示</router-link> <router-link class="todo__link__item" to="/incomplete">未完了のみ表示</router-link> <router-link class="todo__link__item" to="/completed">完了済のみ表示</router-link> </div> </template> <script> export default { }; </script>
↓List
<template lang="html"> <ul class="todos__list"> <app-list-item v-for="todo in todos" :key="todo.id" :todo-title="todo.title" :todo-detail="todo.detail" :todo-completed="todo.completed" @changeCompleted="$emit('changeCompleted', todo)" @showEditor="$emit('showEditor', todo)" @deleteTodo="$emit('deleteTodo', todo.id)" /> </ul> </template> <script> import ListItem from 'TodoRouterDir/components/ListItem'; export default { components: { appListItem: ListItem, }, props: { todos: { type: Array, default: () => [], }, }, }; </script>
↓Listitem
<template lang="html"> <li :class="['todo__item', todoCompleted ? 'is-completed' : '']"> <div class="todo__item__inner"> <div class="todo__item__completed"> <button class="todo__item__completed__btn" type="button" @click="$emit('changeCompleted')" > <template v-if="todoCompleted"> <span>完了</span> </template> <template v-else> <span>未完了</span> </template> </button> </div> <div class="todo__item__desc"> <h2 class="todo__item__desc__title">{{ todoTitle }}</h2> <p class="todo__item__desc__detail">{{ todoDetail }}</p> </div> <div class="todo__item__btn"> <button class="todo__item__btn__edit" type="button" @click="$emit('showEditor')" > 編集 </button> <button class="todo__item__btn__delete" type="button" @click="$emit('deleteTodo')" > 削除 </button> </div> </div> </li> </template> <script> export default { props: { todoTitle: { type: String, default: '', }, todoDetail: { type: String, default: '', }, todoCompleted: { type: Boolean, default: false, }, }, }; </script>
gentaro様ご回答いただきありがとうございます。
質問が下手で申し訳ないです。
エラーの箇所はconsoleに出ていないのでわからないのですが、内容はshowError(err) のelseの箇所がなぜか実行されているという状態です。
おそらくconsole.logを行う箇所が適切ではないから起きたエラーだと思うのでどこでconsole.log(Todos)を行えばいいのか教えていただきたいです。
すみません。伝え忘れてしまったのですが
console.logをcreatedで実行したところこのようなエラーが出ました。
ここに返信するのではなく質問文を修正して書いて下さい。
「エラー」という表現を使うからには、エラーメッセージ等、エラーであることが証明できる内容が必要です。
エラーの内容が正確に確認できるように、エラーメッセージの内容を全文修正せずに記載するか、それが難しい場合は画面のキャプチャ等を載せるようにしてください。
「思った通りに動かない」だけであれば、それは「エラー」ではありません。
ご指摘もっともだと思います。
拙くて申し訳ないです。、
あなたの回答
tips
プレビュー
