[Vuejs]-Vue.js dynamically appending HTML when clicking on a button

by

5👍

✅

https://v2.vuejs.org/v2/guide/list.html

HTML

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
<button @click="addItem()">Add new item</button>

JS

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  },
  methods: {
    addItem(){
      this.items.push({message: 'new message'})
    }
  }
})

Clicking the button will execute addItem() method which will add a new item into data items and it will automatically render new li

👤Mykola Riabchenko

0👍

there are many mistakes

  1. the function addNewObjectiveRow(value)you don’t use the parameter value.
  2. Vue is data-driven, you should change the objectivesData, not simply append the string. Read the document
👤ethan_you

Leave a comment