Question

感谢@ zero298，dup在重要方面并不适用。我想显示对象数组中的所有项目，只是根据用户信号有条件地向每个项目添加一些UI。此外，v-if和v-show非常不同（如此处和其他地方所述）。这个网站上的vue q / a似乎很简单-因为它是新的-主动关闭此类新主题似乎是一个错误。

我可以通过这种方式使表演工作...

（注意...请以“扩展代码段”模式运行代码段以查看控制台内容的行为。不确定如何在控制台中隐藏vue消息）

const app = new Vue({
  el: '#app',
  data: {
    show: false
  },
  methods: {
  }
});

.demo{
  width: 100px;
  height: 30px;
  background-color: green;
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.14/vue.js"></script>
<div id="app">
    <h3>Hi there</h3>
    <div class="demo" @click="show = !show">Click me</div>
    <div v-show="show">Show or hide me</div>
</div>

但是为什么我不能这样工作...

const app = new Vue({
  el: '#app',
  data: {
    objects: [ { name: 'a' }, { name: 'b' }, { name: 'c' } ],
    show: [false, false, false]
  },
  methods: {
  }
});

.demo{
  width: 100px;
  height: 30px;
  background-color: green;
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.14/vue.js"></script>
  <div id="app">
    <div v-for="(object, i) in objects">
      <h3>Hi there {{ object.name }} show status is {{ show[i] }}</h3>
      <div class="demo" @click="show[i] = !show[i]">Click me</div>
      <div v-show="show[i]">Show or hide me</div>
    </div>
  </div>

我看过文档内容说不要循环使用v-if，但是v-show有什么问题？有证据表明分配给show数组的@click表达式未运行（请参阅“ hello”消息旁边的变量状态），但为什么不这样做？

我尝试将逻辑移至方法，并将v-show检查移至方法，但结果相同。

此外，我的对象数组将显示为异步，并且长度未知（但较小）。我不想向这些对象添加“显示”属性，因为用户可以将它们保存回服务器。分配与对象数组匹配的show布尔数组的正确时间和地点是什么？

Answer 1

这是由于vue的更改检测。 Vue无法检测到阵列正在更改。您必须执行以下操作才能检测到它：

<div class="demo" @click="$set(show, i, !show[i])">Click me</div>

有用的：https://vuejs.org/v2/guide/list.html#Array-Change-Detection

如何在循环内使用v-show

1 个答案: