Можно ли добавить / удалить реквизиты компонентов из метода в основном экземпляре Vue? - PullRequest
Новая
       20

Можно ли добавить / удалить реквизиты компонентов из метода в основном экземпляре Vue?

0 голосов
/ 09 июня 2018

В Vue.js у меня есть компонент v-button с prop с именем загрузка .

Компонент: 

Vue.component('v-button', {
    props: ['loading'],
    template: '<button class="btn btn-info"> <span v-if="loading != undefined">Loading...</span> <span v-else><slot></slot></span> </button>'
});

Vue: 

new Vue({
    el: '#app',
    components: ['v-button'],
    methods: {
        niceMethod: function(argument) {
        console.log(argument);
        // Considering that I will have a large amount of v-buttons:
        // Is it possible to do something here to add or remove the prop "loading" ONLY on the v-button I've clicked?
    }
  }
})

Тело: 

<div id="app" class="p-5">
  <p><v-button @click.native="niceMethod('testing!')">Test</v-button></p>
  <p><v-button @click.native="niceMethod('hello!')">Hello</v-button></p>
  <p><v-button @click.native="niceMethod('vue!')">Vuejs</v-button></p>
</div>

Учитывая, что у меня будет большое количество v-кнопок: Естьможно что-то сделать на экземпляре Vue, чтобы добавить или удалить опору загрузка только на кнопку v, которую я нажал?

Я что-то пропустил в документах Vue.js?

Извините, если мой вопрос неясен ... Если так, пожалуйста, проверьте JSFiddle Я сделал.

1 Ответ

0 голосов
/ 09 июня 2018

Почему бы просто не переключить данные loading true / false внутри компонента? 

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>
...