Question

我正在创建一个处理大量数组的VUE（X）-app。

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

我想要一个三个列表的列表，每个列表都有一个输入字段，以添加到三个列表中的每一个。（看一下原始的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按钮和调用方法，这些方法可以在相应的数组中添加输入值。

你还需要什么？

VUE＆amp; VUEX：数组中的数组 - 如何连接它们

1 个答案: