我想为我在项目的各个部分中使用的按钮设置属性，因此我无法在每个按钮中插入静态文本，但是我尝试使用vuex的状态，以便在必须更改名称时使用仅更改所有按钮的状态，而不要通过在每个按钮中查找来更改它。该解决方案对我不起作用，因为按钮上什么都没有出现，而是应该出现“ Foo”和“ Bar”这两个词（实际上，我希望它们出现在我身上）。实际上，它不占用btnType财产。
这是我的组件之一：
<template>
<div>
<b-button
v-for="(btn, idx) in buttons"
:key="idx"
:class="btn.class"
variant="info"
:name="btn.btnType"
>{{ btn.btnType }}</b-button
>
</div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
computed: {
...mapState({
buttonFoo: "buttonFoo",
buttonBar: "buttonBar",
}),
},
data() {
return {
buttons: [
{
btnType: this.buttonFoo,
state: true,
class: "button-class1",
},
{
btnType: this.buttonBar,
state: false,
class: "button-class2",
},
],
};
},
};
</script>
这是我的索引文件：
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
buttonFoo: "Foo",
buttonBar: "Bar"
},
mutations: {},
etc...
});
数据在计算属性之前进行评估，因此无法访问数据中的计算属性。
最好在里面做 mounted
export default {
computed: {
...mapState({
buttonFoo: "buttonFoo",
buttonBar: "buttonBar",
}),
},
data() {
return {
buttons: []
};
},
mounted(){
this.buttons=[
{
btnType: this.buttonFoo,
state: true,
class: "button-class1",
},
{
btnType: this.buttonBar,
state: false,
class: "button-class2",
},
],
}
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句