vue

Vue Snippets – Add Data to List


Sometimes you have a list of items you would like to add to, based on some user interaction or event. The snippet below gives a base template to achieve this.

<template>
  <div>
    <p>{{ list }}</p>
    <input v-model="text">
    <button @click="addToList">Add</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      text: '',
      list: []
    }
  },
  methods: {
    addToList () {
      this.list.push(this.text)
      this.text = ''
    }
  }
}
</script>

In the snippet above, we have a list, an input field and a button. When the button is clicked, the value of the input field is added to the list and the set to an empty string.

Use Cases

  • Todo List

Share on social media

//