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用它可以做需要的是在相应的阵列添加inputed值按钮和调用方法。

你还需要什么？