Question

我正在尝试将b-下拉元素中的文本绑定到商店中的值。我尝试绑定到计算属性，因为存储中的值可以更改，并且b下拉列表的文本应动态更改以反映此更改。我想将值存储在存储中，而不是作为数据对象存储，因为该值必须在存在b-dropdown的组件之外持久存在。

这是b-下拉元素：

<b-dropdown v-bind:text="selectedSearchType" variant="outline-secondary">
  ...
</b-dropdown>

和计算所得的属性

computed: {
  selectedSearchType: function() {
    return store.getters.getSelectedSearchType
  }
},

吸气剂

getSelectedSearchType: state => {
  return state.selectedSearchType
}

状态

state: {
 selectedSearchType: "Item",
 .....
}

我遇到以下错误：

[Vue warn]: Invalid prop: type check failed for prop "text". Expected String, got Function.

如果我不这样做

<b-dropdown v-bind:text="selectedSearchType()" variant="outline-secondary">

我明白了

[Vue warn]: Error in render: "TypeError: Cannot read property 'selectedSearchType' of undefined"

如何解决此问题，以使b下拉列表的文本绑定到商店中的selectedSearchType？

Answer 1

关于绑定到商店的最佳选择是创建一个计算的getter / setter，然后在输入中使用v-model。如下所示，您将不得不根据自己的值进行一些调整。

这还假设b-dropdown将在值更改时发出输入。

<b-dropdown v-model="selectedSearchType" variant="outline-secondary">

computed: {
  selectedSearchType: {
    get() { 
      return //value from store 
    },
    set(val) {
      // set the value in the store
    }
  }
}

Vue.js / Vuex：如何将v与状态值绑定？

1 个答案: