(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?

Majed Badawi · Accepted Answer · 2021-01-28 20:13:26Z

3

The issue is in the class-binding:

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

answered Jan 28, 2021 at 20:13

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lesbaa Over a year ago

Can you explain why this is the case?

Majed Badawi Over a year ago

@Lesbaa isclicked is not defined in data, but it's an attribute in each item, so the way OP was accessing it was not valid.

Lesbaa Over a year ago

Sorry @majed-badawi, I meant can you explain why this is not the case in your answer? Just to make it clearer for whomsoever visits next.

Archimedes Trajano · Accepted Answer · 2023-03-03 20:56:41Z

1

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>

edited Mar 3, 2023 at 20:56

Archimedes Trajano

43.2k29 gold badges223 silver badges373 bronze badges

answered Jul 23, 2021 at 8:20

jiazheng zheng

111 bronze badge

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related