Handling User Input

by Phellipe Lins

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <input type="text" v-model="fruitModel">
  <button @click="addFruit()">add fruit</button>
  
  <ul v-if="fruits.length">
    <li v-for="fruit in fruits">{{ fruit }}</li>
  </ul>
</div>

JavaScript

new Vue({
	el: '#app',
  data() {
  	return {
    	fruitModel: '',
    	fruits: [
      	'Apple',
        'Orange',
        'Coco',
      ]
		}
	},
  methods: {
  	addFruit() {
    	this.fruits.push(this.fruitModel);
		}
  },
})