(!)論理否定による真偽反転は、配列変数ではできないの？

Question

vue動かして手の出来事です。クリックイベントでフラグの反転を行う記述をしたのですが通常の変数では意図通り動作しますが配列の要素としたら動かなくなりました。
要素の初期化も行ってます。なんですかこれ？これはJSの仕様なのでしょうか？？？

<v-row no-gutters @click="isOpen[0] = !isOpen[0]">
...
</v-row>

初期化

data() {
    return {
      isOpen: [
        false,
        false,
        false,
        false,
        false,
      ],
    };
  },

Comments

[maisumakun]

コンソールにエラーが出ていたりはしませんか？

Answer 1

これはVue2の仕様です。

Vue2において値を変更するとそれがDOM要素に反映される仕掛けは以下のようになっています。
・Vueインスタンス作成時にdataオブジェクトの各メンバを、プロパティに変換する
・変換されたプロパティのsetterで、値の代入時にそれをDOM要素に反映する処理を実行する

リアクティブの探求 — Vue.js

そのためdataに新しいプロパティを追加したり、配列の値を変更するときはVue.set()または$set()を利用する必要があります。以下のコードを試してみてください。

<v-row no-gutters @click="$set(isOpen, 0, !isOpen[0])">
...
</v-row>

---

ちなみにVue3であれば上記の制約は無く、質問者さんの書いたコードが意図通りに動作します。