[Vuejs]-Vue2 v-bind not working properly on child instance?

by

0👍

✅

This is exactly what components are for. Here is a component encapsulating your spinner buttons.

console.clear()

Vue.component("spinner",{
  template: `
    <div>
      <i v-bind:class="{'fa-spin': isSpinning}" class="fa fa-address-book"></i>
      <button v-on:click="stop"><slot /></button>  
    </div>
  `,
  data(){
    return {
     isSpinning: true
    }
  },
  methods: {
    stop: function() {
      this.isSpinning = false;
    }
  }
})


var app1 = new Vue({
  el: '#app1',
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="app1">
  <spinner>Stop 1</spinner>
  <spinner>Stop 2</spinner>
</div>
👤Bert

Leave a comment