Question

我已经捕获了这里的当前代码： https://jsfiddle.net/prsauer/Lnhu2avp/71

基本问题是，对于列表项的每次单击，每个项的computeStyle都会被调用-我希望每次单击仅产生样式的一次重新计算

<div id="editor">
  <div v-for="item in dungeons" :key="item.isOpened">
    <div v-on:click="clickedChest(item)" v-bind:style="computeChestStyle(item)">
      {{ item.name }} {{ item.isOpened }}
    </div>
  </div>
</div>

var dgnData = [
    { name: "Lobby", isOpened: false },
  { name: "Side", isOpened: false },
];

new Vue({
  el: '#editor',
  data: { dungeons: dgnData },
  computed: { },
  methods: {
    clickedChest: chest => {
      chest.isOpened = !chest.isOpened;
      console.log("##### Clicked chest", chest);
    },
    computeChestStyle:
        item => {
        console.log("computeStyle", item);
        return item.isOpened ? "color: red" : "color: blue";
        }
  }
});

Answer 1

在每次视图更新时都会重新评估函数调用。如果希望将结果缓存为仅根据需要重新呈现，则需要进行计算。这意味着您需要为item创建一个组件，并在该组件中创建计算对象。

如何在Vue v-for列表中防止多个渲染

1 个答案: