More than 3 years have passed since last update.

Nuxt.jsでdataプロパティの書き換えを変数で指定する

Posted at 2021-11-02

やりたいこと

例えば下記のようなdataオブジェクトがあったとき

data: () => ({
    form: {
      name: '',
      email: '',
      birthday: ''
    },
  }),

nameを更新するときはこのように書くと思います。

this.form.name = 'xxxxx'

このnameの部分と変更する値を変数で渡してやりたいということがあり、フロント初心者の私はハマったので備忘録としてメモしておきます。

$setを使い、このように書ける。

this.$set(this.form, name, 'xxxxx')

これをmethodsで引数として受け取って処理しようとするとこんな感じで動いた。

updateItem (key, value) {
    this.$set(this.form, key, value)
},