VUE 和 VUEX：阵列中的阵列 - 如何连接它们

Question

我正在创建一个处理大量数组的 VUE(X) 应用程序。

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 与按钮和调用方法一起使用，这些方法可以做的就是在相应的数组中添加输入值。

你还需要什么？