时间戳

首页 > 解决方案 > 使用 vuejs 从输入中动态添加项目

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>

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

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

标签： javascripthtmlvue.js

解决方案

您需要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

推荐阅读