[Vuejs]-Is it possible to add/remove props of components from a method on the main Vue instance?

by

0👍

Why not just toggle a data loading true/false inside the component ?

Vue.component('v-button', {
  template: '<button class="btn btn-info" @click="clickMe"> <span v-if="loading">Loading...</span> <span v-else><slot></slot></span> </button>',
  data() {
    return {
      loading: false
    }
  },
  methods: {
    clickMe() {
      this.loading = !this.loading
    }
  }
});

new Vue({
  el: '#app',
  components: ['v-button'],
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <p><v-button>Test</v-button></p>
  <p><v-button>Hello</v-button></p>
  <p><v-button>Vuejs</v-button></p>
</div>

Leave a comment