【Vue.js】$emitで親コンポーネントのObjectを一部だけ変更して更新する

こんにちは、フロントエンドエンジニアのてりーです。

この記事ではVue.jsの$emitでオブジェクトを更新した際に、親コンポーネントのObjectの一部だけを更新する方法についてまとめています。

スプレッド構文を使って更新する方法について詳しく書いてあるので、興味ある方はぜひご覧下さい。

また、正社員で働きながらの副業に興味ある方はこちらの記事をご覧ください。

vuetifyのv-selectの使い方も知りたい方は、こちらの記事も併せてご覧下さい。

やりたい事

$emitで親コンポーネントを更新する際に、オブジェクトの一部だけ更新したい！

基本的な$emitの使い方は

this.$emit('update:props名',更新する値)

となる為、オブジェクトを更新して親コンポーネントに渡すには一工夫が必要。

やり方

①$emitイベントの第2引数でスプレッド構文を使い、要素を書き換える

$emitの第2引数をスプレッド構文を用いると、元のpropsをコピーし、1部分を書き換える事が出来る。

例 item.idを書き換える

this.$emit('update:item', {...this.item, id: 3})
    },

②書き換える要素にindexを指定して、配列ごと書き換える

書き換え要素に[index]とする事で、配列を取得し、書き換えられる。

例

// itemの2要素目のテストを書き換える
// item = {
//　　{id:1,value:"テスト"},
//　　{id:2,value:"テスト"}
//　}


const value = {id:2,value:"書き換え"}
this.$emit('update:item', {...this.item, [2]: value})
    },

まとめ

• $emitでスプレッド構文を用いる事でオブジェクトの1部を変更出来る
• 要素に[index]を指定すると、その順番の配列を取得、書き換え出来る