Vue loops

functions Filters Computed

by yash009

HTML

<div id = "root">
  <h2>
    Cities
  </h2>
  <input v-model="newCity">
  <button v-on:click="addCity">
    + Add City
  </button>
  <ul>
    <li v-for="city in cities">
      {{ city }}
    </li>
  </ul>
  <h2>
    Fruits
  </h2>
    <input v-model="newFruit" v-on:keyup.enter="addFruit">
   <button @click="addFruit">
    + Add Fruit
  </button>
  <ul>
   <li v-for="Fruit in Fruits">
      {{ Fruit.name | capitalize }}
    </li>
  </ul>
</div>

JavaScript

new Vue ({
	el:'#root',
  data: {
		cities: [
    	'nashville',
      'jacksonville',
      'tampa',
      'Austin',
      'Miami',
      'Charlotte'
    ],
    Fruits:[
    	{name:'apple'},
      {name: 'mango'},
      {name: 'banana'},
      {name: 'pineapple'}
    ]
  },
  methods: {
  	addCity: function() {
    	return this.cities.push(this.newCity)
      this.newCity = ''
    },
    addFruit: function() {
    	return this.Fruits.push({name: this.newFruit})
      this.newFruit = ''
    }
 	},
  filters: {
  	capitalize: function(value) {
    	return value.toUpperCase()
    }
  }
})