TODOアプリを作成中です。
App.vue(親コンポーネント)
card.vue(子コンポーネント)
inputComponent.vue(子コンポーネント)
親コンポーネント側でtodoの(valueとしてます)値を保持しておいて、値をpropsでcardコンポーネントに渡して表示し、
親コンポーネント側でtodosの配列の値を保持しておいて、inputコンポーネント側のaddtodoイベントをemitして、親コンポーネント側にイベントを渡すようにしています。
cardコンポーネントの値をv-forで回して、カードを1枚1枚表示させるというイメージで実装しています。
値自体は表示されているように見えるのですが、画像のようなエラーが出てしまいました。原因がなかなか掴めず苦戦しています。
そもそも設計の考えが良くないのでしょうか....
ご教示のほど、よろしくお願い致します。
親コンポーネントは下記になります。
<template> <div id="app"> <div class="container"> <!-- <List /> --> <card v-for="todo in todos" :key="todo.id" :todo="todo" /> <input-component @clicked-add-todo="addtodo" :value="value" @input="value = $event" /> </div> </div> </template> <script> // import List from './components/List'; import card from './components/card'; import inputComponent from './components/inputComponent'; export default { data() { return { value: '', todos: [], }; }, components: { // List, inputComponent, card, }, methods: { addtodo() { console.log('子コンポーネントのイベントをキャッチしました。'); const params = { title: this.value, }; this.todos.push(params); }, }, }; </script> <style> /* .container { display: flex; } */ </style>
inputコンポーネントは下記になります。
<template> <div> <h2>inputコンポーネント</h2> <input type="text" @keyup.enter="addtodo" :value="value" @input="$emit('input', $event.target.value)" /> </div> </template> <script> export default { data() { return { props: ['value'], }; }, methods: { addtodo() { this.$emit('clicked-add-todo'); }, }, }; </script> <style></style>
カードコンポーネントは下記になります。
<template> <div> <h2>カードコンポーネント</h2> {{ todo.title }} {{ todo }} </div> </template> <script> export default { props: ['todo'], }; </script> <style></style>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/04 06:47