Bindung an Array funktioniert nicht innerhalb der Vue-Instanz

Question

Ich versuche, meinen Kopf um vue.js zu bekommen, aber ich vermisse etwas Wesentliches.

Ich habe mehrere Felder und möchte, dass sie sich wie ein Akkordeon verhalten (nur eines wird angezeigt; das Öffnen eines anderen Feldes schließt das vorherige). Dies ist mein Code:

<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> 

und das Skript:

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

Wenn die Seite geladen wird, wird das zweite Feld angezeigt (was richtig ist, weil das zweite Element in dem Boxen-Array ist true) .

Aber das Klicken auf die Schaltflächen ändert weder die boxs.array noch die Anzeige der Boxen. Das Protokoll sagt mir, dass das Skript als solches zu funktionieren scheint, weil ich den korrekten Wert geloggt bekomme, wenn ich auf die Knöpfe klicke. Also nehme ich an, es ist etwas in der Bindung. Kann mir jemand den richtigen Weg weisen?

Answer 1

Versuchen Sie folgendes:

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/

EDIT:

Sie können auch Ihre gerade mytoggle Methode ändern Array Werte ändern mit 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

Sie die $set Methode verwenden sollten, anstatt direkt ändern.

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>