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

在我的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>

添加pooltable或swimmingpool等设施
添加

目标是让它在单击“添加”时将项目添加到列表中，然后清空输入字段，因此我最终得到类似的结果

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

池表

游泳池

球桌

对于这种情况，您需要使用

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>

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 = '';
  }
}