Vue

by jmpp77

HTML

<div id="app">
  <ul>
    <li v-for="(hobby, index) in hobbies">
      #{{index}} {{ hobby }}
    </li>
  </ul>

  <input type="text" v-model="newItem">
  <button @click="addItem">Ajouter</button>

</div>

CSS

#app { font-size: 2rem; }
ul { list-style-type: disc !important; margin: 20px 0; padding-left: 40px;}

Vue

new Vue({
   el: '#app',
   data : {
   			newItem : '',
     		hobbies : ["Code", "Food", "Tricking"]
   },
   methods: {
   	    addItem() {
        	this.hobbies.push(this.newItem)
        }
   }
 });