是否可以在主 Vue 实例上的方法中添加/删除组件的 props?

Question

在 Vue.js 上，我有一个 v 按钮组件，其prop名为load。

元件：

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。

Answer 1

为什么不在组件内将数据切换loading真/假？

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>