(版本3)[Vue警告]:属性“...”在呈现期间被访问,但未在示例上定义,< App>类绑定时出错

q3aa0525  于 2023-03-09  发布在  Vue.js
关注(0)|答案(2)|浏览(148)
<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”布尔值的click事件来更改每个“boardFields对象”div的类,但我收到以下错误消息:
[Vue警告]:属性“isclicked”在呈现期间被访问,但未在instance.at上定义
这是否与对象是在mounted()中创建的这一事实有关?或者是其他原因?

jljoyd4f

jljoyd4f1#

问题出在class-binding中:

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

nlejzf6q2#

由a方法传入的参数对你想要达到的效果没有意义.我不知道你是否想要在单击后改变整个数组或单个数组.我给出的例子是改变整个数组,改变当前数组几乎是相同的,只是添加一个指针到它遍历的循环

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>

相关问题