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

user_14633487 0
Viewed 15576
<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?

vuejs3 vue.js
2 Answers

The issue is in the class-binding:

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

the parameters passed in by the a method have no meaning for the effect you want to achieve.i don't know whether you want to change the whole array after clicking or a single one. my example i give is to change the entire array, changeing the current one is almost the same , just adding a pointer to the loop where it traverses

    data() {
            return {
                isclicked: false,

            }

        },
        methods: {
            toggleClick(item) {
                this.isclicked = !this.isclicked;
            },
        },
 <div
                v-for="item in 10"
                :class="{ notclicked: !isclicked, clicked: isclicked }"
                @click="toggleClick()"
        >
            {{ item }}
        </div>

user_136557120
Related