(Vue3) [Vue warn] : La propriété "..." a été accédée pendant le rendu mais n'est pas définie sur l'instance. à <App> erreur lors de la liaison de classe

Question

<template>
  <div class="container">
    <div class="gameboard">
      <div class="title">Game Board</div>
      <div class="main">
        <div
          v-for="item in boardFields"
          :key="item.number"
          :class="{ notclicked: !isclicked, clicked: isclicked }"
          @click="toggleClick(item)"
        >
          {{ item.number }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},

  data() {
    return {
      boardFields: [],
    };
  },

  methods: {
    toggleClick(item) {
      item.isclicked = !item.isclicked;
    },
  },
  mounted() {
    this.boardFields = [...Array(49)].map((_, i) => ({
      number: i + 1,
      isclicked: false,
    }));
  },
};
</script>

<style>

.notclicked {
  font-size: 3.5rem;
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.3rem;
  width: calc(40.4rem / 7);
  height: calc(40.4rem / 7);
  border-radius: 0.8rem;
}

.clicked {
  font-size: 3.5rem;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.3rem;
  width: calc(40.4rem / 7);
  height: calc(40.4rem / 7);
  border-radius: 0.8rem;
}

</style>

Je veux changer la classe de chaque div 'boardFields object' par le biais d'un événement de clic en liant la classe au booléen 'isclicked' dans chaque objet mais je reçois ce message d'erreur :

[Vue warn] : La propriété "isclicked" a été accédée pendant le rendu mais n'est pas définie sur l'instance. à l'adresse

Cela a-t-il quelque chose à voir avec le fait que les objets sont créés dans mounted() ? Ou bien est-ce quelque chose d'autre ?

J'apprécie toute aide.

Answer 1

Le problème est dans le class-binding :

:class="{ notclicked: !item.isclicked, clicked: item.isclicked }"