(Vue3) [Vue warn]: Property "..." was accessed during render but is not defined on instance. at <App> error when Class binding

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>

I want to change the class of each 'boardFields object' div through a click event by class binding to the 'isclicked' boolean in each object but I get this error message:

[Vue warn]: Property "isclicked" was accessed during render but is not defined on instance. at

Does it have something to do with the fact that the objects are created in mounted()? Or is it something else?

Answer 1

The issue is in the class-binding:

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