7 回閲覧されました

みなさんこんにちは、jonioです。

refに設定した値を直接上書きして変更しようとしたら動作しなくて焦りました。

同じことをしない為にもこの記事を残します。

Laravelの無料学習サイトを作りました

Laravelを勉強したい人向けの無料の学習サイトを作りました。

ここからリンクに飛べますのでぜひ利用してください。

refの定義

下記にしたとします。

const items = ref([
    {
        math: '',
        english: ''
    }
]);

const items = ref([
    {
        math: '',
        english: ''
    }
]);

refの変更が判断されないコード

下記のコードでは変更ができません。

const items = ref([
    {
        math: 'newMathValue',
        english: 'newEnglishValue'
    }
]);

const items = ref([
    {
        math: 'newMathValue',
        english: 'newEnglishValue'
    }
]);

動作しない理由は配列があった最初の状態から配列の中身を変更すると配列がある状態のままなのでvueが変更していないと判断するからです。

変更すればいいのでメソッドを使って操作します。

refの変更が判断されるコード

items.value.splice(0, items.value.length, {
    math: 'newMathValue',
    english: 'newEnglishValue'
});

items.value.splice(0, items.value.length, {
    math: 'newMathValue',
    english: 'newEnglishValue'
});

spliceメソッドを使うと第一引数と第二引数でitems.valueの値を削除して第三引数に変更します。

削除して代入することでvueは変更したと判断して変更が反映されます。