VUE & VUEX: массивы в массивах - как их подключить

Question

Я создаю VUE (X) -app, который имеет дело с большим количеством массивов.

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

Я хочу иметь список трех списков, каждый с 1 полем ввода, чтобы добавить к каждому из трех списков. (Посмотрите необработанного пример кода HTML)

Необработанные HTML будет выглядеть следующим образом:

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

Я спрашиваю себя, как подключить его и сделать его динамичным.

Где бы вы хотели добавить директивы, чтобы заставить работать так, как вы ожидали?

Answer 1

Вы можете использовать v-for перечислить массивы, как это:

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

Вы можете использовать v-on:click или @click с помощью кнопок и методов обработки вызовов, которые могут сделать желательно, чтобы это добавить значение в занесены в соответствующие массивы.

Что еще вам нужно?