Vue component

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>
  <city-list :city="city"/>
</div>

JavaScript

Vue.component('city-list', {
props: ['cities'],
	template:
  `<ul>
    <li v-for="city in cities">
      {{ city }}
    </li>
  </ul>`
})

app = new Vue ({
	el:'#root',
  component: [
  	'city-list'
  ],
  data: {
		cities: [
    	'nashville',
      'jacksonville',
      'tampa',
      'Austin',
      'Miami',
      'Charlotte'
    ],
    newCity: ''
  },
  methods: {
  	addCity: function() {
    	return this.cities.push(this.newCity)
      this.newCity = ''
    }
 	}
})