Question

尝试使用数组代替show0和show1变量，

<div id="demo2">
  <p>1. <button v-on:click="show[0] = !show[0]">Toggle</button>
    <div class="collapsible" v-show="!show[0]">Hello!</div>
  </p>
  <p>2. <button v-on:click="show[1] = !show[1]">Toggle</button>
    <div class="collapsible" v-show="!show[1]">Hello!</div>
  </p>
</div>

new Vue({ el:'#demo2', data:{show:[true,true]} }) ... 无法正常工作，并且没有错误消息。

请注意。使用简单的

时

  <p>1. <button v-on:click="show0 = !show0">Toggle</button>
     <div class="collapsible" v-show="!show0">Hello!</div>
  </p> ...

和new Vue({ el:'#demo1', data:{show0:true,show1:true} }) 它工作正常。

PS：我看到复杂的解决方案，例如this one的模板和组件...但我的目的只是了解如何使用数组。

Answer 1

从Vue 1.0开始，但同样适用于Vue 2.0

通过直接设置索引来修改数组（例如arr [0] = val）或修改其长度属性。同样，Vue.js也无法取件这些变化。始终使用Array实例方法修改数组，或完全替换它。 Vue提供了一种便利的方法 arr。$ set（index，value）是arr.splice的语法糖（index，1，值）。

https://vuejs.org/2016/02/06/common-gotchas/

以下是您可以使用的语法：

https://vuejs.org/v2/api/#vm-set

这应该有效：

v-on:click="$set(show, 0, !show[0])"

我通常不会在内联处理程序中执行此类操作。对于简单的模板，复杂性会增加太多。我可能会在这样的方法中执行此操作：

this.$set(this.show, 0, !this.show[0])

Answer 2

您正在使用HBaseTestingUtility更改show []。

Vue无法检测到这些类型的数组操作。请参阅array change detection caveats。

因此请使用v-on:click="show[0] = !show[0]"，如下所示

vm.$set()

或者使用数组的<p>1. <button v-on:click="$set(show, 0, !show[0])">Toggle</button> <div class="collapsible" v-show="!show[0]">Hello!</div> </p>方法：

splice()

如何使用数组变量进行show / collapese控件？

2 个答案: