子コンポーネントから親コンポーネントに値が反映されない。

Question

vue.jsで家計簿アプリを作成中です。
vue-routerを使用しています。
収入コンポーネントを作り込んでいるところです。
子コンポーネント側で日付と金額と名目を入力し、登録ボタンを押しても値が反映されません。
子コンポーネントから、emitイベントで親コンポーネントのメソッドを呼び出すようにしているのですが、どの部分が悪いのかがわからない状態です。
テンプレート側ではエラーメッセージは出ていません。
ご教示のほど、よろしくお願い致します。

親コンポーネントは下記になります。

##親コンポーネント

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/income">収入</router-link>|
      <router-link to="/bop">収支</router-link>|
      <router-link to="/payment">支出</router-link>
    </div>
    <router-view
      :incomes="incomes"
      :income-money="incomeMoney"
      :income-date="incomeDate"
      :income-nominal="incomeNominal"
      @add-income="addIncome"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      incomes: [],
      incomeMoney: 0,
      incomeDate: "",
      incomeNominal: "",
      payments: [],
      paymentMoney: 0,
      paymentDate: "",
      paymentNominal: ""
    };
  },
  methods: {
    addIncome() {
      this.incomes.push({
        icd: this.incomeDate,
        icm: this.incomeMoney,
        icn: this.incomeNominal
      });
      this.incomeDate = "";
      this.incomeNominal = "";
      this.incomeMoney = 0;

      // this.save();
    }
  }
};
</script>

##子コンポーネント

<template>
  <div>
    <h1>収入ページ</h1>
    <p>
      日付選択：
      <!-- <input type="Date" v-model="incomeDate" /> -->
      <input type="Date" v-bind:value="incomeDate" @input="$emit('input',$event.target.value)" />
    </p>
    <p>
      金額：
      <input
        type="number"
        v-bind:value="incomeMoney"
        @input="$emit('input',$event.target.value)"
      />円
    </p>
    <p>
      名目：
      <input
        type="text"
        v-bind:value="incomeNominal"
        @input="$emit('input',$event.target.value)"
      />
    </p>
    <button @click="addIncome">登録</button>
    <hr />
    <div v-for="income in incomes" :key="income.no">{{incomeDate}}:{{incomeMoney}}:{{incomeNominal}}</div>
  </div>
</template>

<script>
export default {
  props: {
    incomes: Array,
    incomeMoney: Number,
    incomeDate: String,
    incomeNominal: String
  },

  methods: {
    addIncome() {
      this.$emit("add-income");
    }
  }
};
</script>

Answer 1

$emitで親コンポーネントのメソッドを呼んだところで呼ばれるだけであって親の値が変化することはないはずです。

vm.$emit
$emit を追加の引数と共に使う場合:
のようにパラメータを渡せるので渡してあげるとかになります。

---

※
単方向のデータフロー

JavaScript のオブジェクトと配列は、参照渡しされることに注意してください。参照として渡されるため、子コンポーネント内で配列やオブジェクトを変更すると、 親の状態へと影響します。

を利用するっていうのもある(書いてあるので使ってもいいのかな…)

---

※

      <input
        type="text"
        v-bind:value="incomeNominal"
        @input="$emit('input',$event.target.value)"
      />

こういう記載多いけど、
コンポーネントで v-model を使う

のv-modelの変わりの書き方に近いけど、違うのかな…

Comments

[fork_]

ご回答ありがとうございます。
公式ドキュメントにもございます通り、@input="$emit('input',$event.target.value)の形式でないと動作しないと書いておりました。。
vue-routerは使わず、簡単なTODOアプリで実際に子コンポーネントから親コンポーネントに値を渡して試してみたいと思います。