[vue.js][Javascript] リアクティブに一覧表の一部の値を更新する

バージョン

Vue.js 2.6.10

概要

一例として一覧表示の該当項目行の一部の値を更新し、その内容をリアクティブに表示反映する。
指定行を削除するのはググるとヒットしやすいが行の値の一部だけを更新するのがなかったので記載する。

コード

◾️hoge.vue

<script>
export default {
    methods: {
        addGood : function (code) {
            // 該当行のデータを取得
            let data = this.data_list.find(p => p.users_code == code);
            // 変更したいプロパティ
            data.good += 1;
            // 該当行のインデックス取得
            const itemIndex = this.data_list.findIndex(p => p.users_code == code);
            // 指定インデックスを変更したデータに置き換える
            this.data_list.splice(itemIndex, 1, data);
        }
    }
};
</script>