綁定到vue實例內不工作的數組

Question

我試圖讓我的頭繞過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] 
    } 
}); 

當加載頁面時，第二個框被顯示出來（這是正確的，因爲箱子數組中的第二個元素是真實的） 。

但點擊按鈕不會改變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 
     } 
    } 
}); 

小提琴： 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); 
} 

Answer 2

您應該使用$set方法，而不是直接改變。因爲數據更新不被在`boxes`變量改變

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>