Dynamic Data Binding in Vue

by Abhishek Hingu

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.3.1/vuex.min.js"></script>

  <div id="app">
      <input v-model="cartext"/>
      <div v-for = "car in cars">
          <div>
            {{car}}
          </div>
      </div>
        <button @click="add">Add</button>
        {{cars}}
  </div>

JavaScript

const store = new Vuex.Store({
  strict: true,
  state: {
    showroom: {
      cars: ["Maruti","Honda"],
    }
  },
  mutations: {
    updateUser: function (state, car) {
      state.showroom.cars.push(car);
    }
  }
});
new Vue({
  el: '#app',
  store:store,
  data(){
   return {
   	 cartext:'',
   	 cars:this.$store.state.showroom.cars,
   }
  },
  methods:{
    add: function() {
  	 this.$store.commit('updateUser', this.cartext);
    }
  }
})