javascript - 绑定(bind)到数组在 vue 实例中不起作用

Question

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

我有几个盒子，我希望它们像 Accordion 一样工作(只显示一个；打开另一个盒子会关闭前一个盒子)。这是我的代码:

<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]
    }
});

加载页面时，将显示第二个框(这是正确的，因为框数组中的第二个元素为 true)。

但是单击按钮不会更改boxes.array 也不会更改框的显示。日志告诉我，这样的脚本似乎可以工作，因为当我单击按钮时，我得到了记录的正确值。 所以我想它是装订中的东西。 有人可以引导我走上正确的道路吗？

Answer 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
        }
    }
});

fiddle : https://jsfiddle.net/crabbly/9a6bua6x/

编辑:

您还可以仅更改 mytoggle 方法，以使用 Vue 的 $set 更改数组值:

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);
}