VUE & VUEX: Arrays in Arrays - So verbinden Sie sie

Question

Ich erstelle eine VUE (X) -App, die mit vielen Arrays beschäftigt.

state: { 
    triads: [{ 
    people: [], 
    places: [], 
    equipment: [] 
    }] 
}, 

Ich mag eine Liste von drei Listen, die jeweils mit 1 Eingabefeld haben, zu jedem der drei Listen hinzuzufügen. (Werfen Sie einen Blick auf die Roh-Code HTML-Beispiel)

Die rohe HTML würde wie folgt aussehen:

<div id="triads"> 
    <div class="triad"> 
    <div id="people"> 
     <input type="text"> 
     <button>add</button> 
     <ul> 
     <li>person 1</li> 
     <li>person 2</li> 
     <li>person 3</li> 
     </ul> 
    </div> 
    <div id="places"> 
     <input type="text"> 
     <button>add</button> 
     <ul> 
     <li>place 1</li> 
     <li>place 2</li> 
     <li>place 3</li> 
     </ul> 
    </div> 
    <div id="equipment"> 
     <input type="text"> 
     <button>add</button> 
     <ul> 
     <li>equipment 1</li> 
     <li>equipment 2</li> 
     <li>equipment 3</li> 
     </ul> 
    </div> 
    </div> 
</div> 

frage ich mich, wie es verdrahten und sie dynamisch machen.

Wo würden Sie Anweisungen hinzufügen, damit es so funktioniert, wie Sie es erwarten?

Answer 1

können v-for verwenden, um die Arrays wie diese aufzulisten:

<div id="triads"> 
    <div class="triad"> 
    <div id="people"> 
     <input id="people-input" type="text"> 
     <ul> 
     <li v-for="p in person">{{p}}</li> 
     </ul> 
    </div> 
    <div id="places"> 
     <input id="places-input" type="text"> 
     <ul> 
     <li v-for="place in places">{{place}}</li> 
     </ul> 
    </div> 
    <div id="equipment"> 
     <input id="equipment-input" type="text"> 
     <ul> 
     <li v-for="e in equipment">{{e}}</li> 
     </ul> 
    </div> 
    </div> 
</div> 

Sie v-on:click oder @click mit Tasten und Anrufarten verwendet werden, die gewünschte tun können, die eingegebene Wert wird in der entsprechenden Arrays hinzufügen.

Was brauchen Sie noch?