vue.js - (Vue3) [Vue warn] : Property "..." was accessed during render but is not defined on instance. 在 错误时类绑定(bind)

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>

我想通过单击事件通过类绑定(bind)到每个对象中的“isclicked” bool 值来更改每个“boardFields 对象”div 的类，但我收到以下错误消息:
[Vue 警告]:在渲染期间访问了属性“isclicked”，但未在实例上定义。
在
这与对象是在mounted() 中创建的事实有关吗？或者是别的什么？
感谢任何帮助。

Answer 1

问题出在 class-binding :

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