绑定到数组在 vue 实例中不起作用答案

【问题标题】：binding to array not working within vue instance绑定到数组在 vue 实例中不起作用
【发布时间】：2016-06-13 15:32:12
【问题描述】：

我正在尝试了解 vue.js，但我似乎遗漏了一些重要的东西。

我有几个盒子，我希望它们像手风琴一样工作（只显示一个；打开另一个盒子会关闭前一个盒子）。这是我的代码：

<div id="app">

  <div class="block">
    <button v-on:click="mytoggle(0,$event)">block one</button>
    <div v-if="boxes[0]">
      <p>i am box number one</p>
      <p>i am box number one</p>
    </div>
  </div>

  <div class="block">
    <button v-on:click="mytoggle(1,$event)">block two</button>
    <div v-if="boxes[1]">
      <p>i am box number two</p>
      <p>i am box number two</p>
    </div>
  </div>

  <div class="block">
    <button v-on:click="mytoggle(2,$event)">block three</button>
    <div v-if="boxes[2]">
      <p>i am box number three</p>
      <p>i am box number three</p>
    </div>
  </div>

  <pre>{{ $data | json }}</pre>

</div>

和脚本：

var vm = new Vue({
    el: '#app',

    methods: {
        mytoggle: function (n, event) {
            event.preventDefault();
            for(var i = 0; i < 3; i++) { // close all boxes
                this.boxes[i] = false;
            }
            this.boxes[n] = true; // open the corresponding box
            console.log(n);
        }
    },

    data: {
        boxes: [false,true,false]
    }
});

当页面被加载时，第二个盒子被显示（这是正确的，因为盒子数组中的第二个元素为真）。

但是点击按钮不会改变 box.array 也不会改变盒子的显示。日志告诉我，这样的脚本似乎可以工作，因为我在单击按钮时记录了正确的值。所以我想它在绑定中。有人可以带领我走上正确的道路吗？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

试试这个：

HTML：

<div id="app">

  <div class="block">
    <button @click.prevent="mytoggle(0)">block one</button>
    <div v-show="boxes[0].show">
      <p>i am box number one</p>
      <p>i am box number one</p>
    </div>
  </div>

  <div class="block">
    <button @click.prevent="mytoggle(1)">block two</button>
    <div v-show="boxes[1].show">
      <p>i am box number two</p>
      <p>i am box number two</p>
    </div>
  </div>

  <div class="block">
    <button @click.prevent="mytoggle(2)">block three</button>
    <div v-show="boxes[2].show">
      <p>i am box number three</p>
      <p>i am box number three</p>
    </div>
  </div>

  <hr/>

  <pre>{{ boxes | json}}</pre>

</div>

Vue：

var vm = new Vue({
    el: '#app',
    data: {
        boxes: [{show:false},{show:true},{show:false}]
    },
    methods: {
        mytoggle: function (n) {  
            for(var i = 0; i < 3; i++) { // close all boxes
                vm.boxes[i].show = false;
            }
            vm.boxes[n].show = true; // open the corresponding box
        }
    }
});

小提琴： https://jsfiddle.net/crabbly/9a6bua6x/

编辑：

您也可以使用 Vue 的 $set 更改您的 mytoggle 方法来更改数组值：

mytoggle: function (n, event) {
    event.preventDefault();
    for(var i = 0; i < 3; i++) { // close all boxes
        this.boxes.$set(i, false);
    }
    this.boxes.$set(n, true); // open the corresponding box
    console.log(n);
}

【讨论】：

这不起作用，因为boxes变量中的数据更新没有被改变。检查this jsfiddle 和v-show 和其他一些小改动，仍然无法正常工作
有趣。 Vue 没有绑定数组值。它确实适用于一组对象。我会用一个解决方案为你更新答案，即使大多数时候我们会使用对象数组，其中你有一个块对象，有一个 id 值，一个显示值或选定值......
我使用 vue 已经有一段时间了，但从未注意到原始值数组存在问题。对我来说这似乎是一个错误
这里也一样。这没有意义。看看这个非常简单的小提琴：jsfiddle.net/crabbly/Leqy66r8
是的，我看到了。很好的调查。

【解决方案2】：

您应该使用$set 方法，而不是直接更改。 [ref]

此外，您可以使用如下更简单的解决方法：

new Vue({
  el: '#app',
  data: {
    selected: 1
  },
  methods: {
    select (index) {
      this.selected = index
    },
    isSelected (index) {
      return this.selected === index
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>

<div id="app">
  <div class="block">
    <button @click="select(0)">block one</button>
    <div v-show="isSelected(0)">
      <p>i am box number one</p>
      <p>i am box number one</p>
    </div>
  </div>

  <div class="block">
    <button @click="select(1)">block two</button>
    <div v-show="isSelected(1)">
      <p>i am box number two</p>
      <p>i am box number two</p>
    </div>
  </div>

  <div class="block">
    <button @click="select(2)">block three</button>
    <div v-show="isSelected(2)">
      <p>i am box number three</p>
      <p>i am box number three</p>
    </div>
  </div>
</div>

【讨论】：