javascript - 使用 vuejs 从输入动态添加项目

Question

在我的 vuejs 项目中，我有一个表单部分可以为房屋添加设施和电器。有一个用于输入设施的输入字段和用于将其添加到列表的按钮，但我有点不确定如何执行此操作。

我的 HTML:

<div class="input-wrapper flex align-end">
    <div class="input-wrap">
         <label for="facility">Add facility like pooltable or  swimmingpool</label>
         <input type="text" v-model="facility" id="facility" class="bordered border-green" />
    </div>

    <div class="input-wrap">
       <button class="button button-main button-green-light add-button" data-button-type="add" @click.prevent="addFacilities">Add</button>
    </div>
</div>

目标是让它在单击“添加”时将项目添加到列表中，然后清空输入字段，所以我最终得到了这样的结果

<ul>
   <li>Pool table<li>
   <li>Swimming Pool<li>
   <li>Fussball table</li>
</ul>

<input type="hidden" name="facilities" value="pool table, swimmingpool, fussball table" />

Answer 1

对于这种情况，您需要使用 v-for。

在列表模板部分

<ul>
  <li v-for="item in items" :key="item">{{item}}</li>
</ul>

在表单模板部分

// .. form items
<input type="text" v-model="input">
<button type="button" @click="addToItems">Add</button>

在vue组件js部分

data: {
  input: '',
  items: [],
},
methods: {
  addToItems() {
    if (!this.input) {
      // input value is empty
      return;
    }

    // add item to reactive array items
    this.items.push(this.input);

    // clear the input
    this.input = '';
  }
}

---

请参阅此处示例:https://codepen.io/Mgorunuch/pen/LYYGmQp