vue.jsで家計簿アプリを作成中です。
vue-routerを使用しています。
収入コンポーネントを作り込んでいるところです。
子コンポーネント側で日付と金額と名目を入力し、登録ボタンを押しても値が反映されません。
子コンポーネントから、emitイベントで親コンポーネントのメソッドを呼び出すようにしているのですが、どの部分が悪いのかがわからない状態です。
テンプレート側ではエラーメッセージは出ていません。
ご教示のほど、よろしくお願い致します。
親コンポーネントは下記になります。
vue:
1##親コンポーネント 2 3<template> 4 <div id="app"> 5 <div id="nav"> 6 <router-link to="/income">収入</router-link>| 7 <router-link to="/bop">収支</router-link>| 8 <router-link to="/payment">支出</router-link> 9 </div> 10 <router-view 11 :incomes="incomes" 12 :income-money="incomeMoney" 13 :income-date="incomeDate" 14 :income-nominal="incomeNominal" 15 @add-income="addIncome" 16 /> 17 </div> 18</template> 19 20<script> 21export default { 22 data() { 23 return { 24 incomes: [], 25 incomeMoney: 0, 26 incomeDate: "", 27 incomeNominal: "", 28 payments: [], 29 paymentMoney: 0, 30 paymentDate: "", 31 paymentNominal: "" 32 }; 33 }, 34 methods: { 35 addIncome() { 36 this.incomes.push({ 37 icd: this.incomeDate, 38 icm: this.incomeMoney, 39 icn: this.incomeNominal 40 }); 41 this.incomeDate = ""; 42 this.incomeNominal = ""; 43 this.incomeMoney = 0; 44 45 // this.save(); 46 } 47 } 48}; 49</script> 50 51
vue
1##子コンポーネント 2 3<template> 4 <div> 5 <h1>収入ページ</h1> 6 <p> 7 日付選択: 8 <!-- <input type="Date" v-model="incomeDate" /> --> 9 <input type="Date" v-bind:value="incomeDate" @input="$emit('input',$event.target.value)" /> 10 </p> 11 <p> 12 金額: 13 <input 14 type="number" 15 v-bind:value="incomeMoney" 16 @input="$emit('input',$event.target.value)" 17 />円 18 </p> 19 <p> 20 名目: 21 <input 22 type="text" 23 v-bind:value="incomeNominal" 24 @input="$emit('input',$event.target.value)" 25 /> 26 </p> 27 <button @click="addIncome">登録</button> 28 <hr /> 29 <div v-for="income in incomes" :key="income.no">{{incomeDate}}:{{incomeMoney}}:{{incomeNominal}}</div> 30 </div> 31</template> 32 33<script> 34export default { 35 props: { 36 incomes: Array, 37 incomeMoney: Number, 38 incomeDate: String, 39 incomeNominal: String 40 }, 41 42 methods: { 43 addIncome() { 44 this.$emit("add-income"); 45 } 46 } 47}; 48</script> 49 50
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/17 14:20