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

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

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

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

Q&A

解決済

1回答

902閲覧

子コンポーネントのinputで入力した値を、親コンポーネント側で参照したい

fork_

総合スコア43

Vue.js

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

0グッド

0クリップ

投稿2020/06/04 03:03

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>

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

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

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

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

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

guest

回答1

0

ベストアンサー

vue

1 data() { 2 return { 3 props: ['value'], 4 }; 5 },

propsつかってるのなら

vue

1 props: ['value'],

では?

投稿2020/06/04 06:17

rururu3

総合スコア5545

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

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

fork_

2020/06/04 06:47

エラー文解消されました。。 ありがとうございました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問