(Vue3) [Vue warn]：属性“...”在渲染期间被访问，但未在实例上定义。类绑定时 <App> 错误

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>

我想通过类绑定到每个对象中的“isclicked”布尔值的单击事件来更改每个“boardFields object”div 的类，但我收到此错误消息：

[Vue warn]：属性“isclicked”在渲染期间被访问，但未在实例上定义。在

这与创建对象的事实有关吗mounted()？或者是别的什么？

Answer 1

问题在于class-binding：

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