Vue Snippets – Add Data to List
Posted on: May 01, 2020 by Kelvin Gobo
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
//