CODEWITHSUNDEEP
javascripthtmlvue.js
Morten Hagh
Morten Hagh

Reputation: 2113

Dynamically add items from input with vuejs

In my vuejs project I have a form section to add facilities and appliances to a house. There is an input field to input a facility and button to add it to a list, but I am a bit unsure how to do this.

My 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>

The goal is to make it add the item to a list when clicking "Add" and then empty the input field, so I end up with something like this

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

Upvotes: 3

Views: 1928

Answers (1)

Mgorunuch
Mgorunuch

Reputation: 686

You need to use v-for for this case.

in list template part

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

in form template part

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

in vue component js part

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

See example here: https://codepen.io/Mgorunuch/pen/LYYGmQp

Upvotes: 3

Related Questions