VUE＆VUEX：配列の配列 - 接続方法

Question

多くの配列を扱うVUE（X）-appを作成しています。

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

は、私は3つのリストのそれぞれに追加する3つのリスト、1つの入力フィールドを持つそれぞれのリストを持っていると思います。私はどのようにそれを配線し、それを動的にする自分自身を求めています

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

：生のHTMLは次のようになり

を（生のHTMLコード例を見てください）。

ディレクティブを追加して、期待どおりに動作させるにはどうすればよいですか？

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> 

あなたは、対応する配列でinputed値を追加することが望ましいんできるボタンと通話方法でv-on:clickまたは@clickを使用することができます。

他に何が必要ですか？