javascript - Vue.js/Vuex:我如何 v-bind 到一个状态值?
问题描述
我正在尝试将 b-dropdown 元素中的文本绑定到商店中的值。我尝试绑定到计算属性,因为存储中的值可以更改,并且 b-dropdown 的文本应该动态更改以反映此更改。我想将值存储在存储中而不是作为数据对象,因为该值必须保留在 b-dropdown 存在的组件之外。
这是 b-dropdown 元素:
<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-dropdown 的文本绑定到商店中的 selectedSearchType?
解决方案
绑定到商店的最佳选择是创建一个计算的 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
}
}
}
推荐阅读
- amazon-web-services - 如何约束客户端在 s3 上传时发送正确的 sha256 作为文件密钥?(预签名网址)
- java - 识别无效数据并通过控制台上的消息向用户报告
- java - Java 当前日期和过去日期之间的年、月、日、小时、分钟、秒之间的差异
- r - 将值从一个表复制到另一个表,仅当第二个表具有特定值时
- maven - sbt:在使用凭据获取私有 maven 存储库时添加 http 标头
- sql - 执行以下查询时 Netezza Box 重新启动
- php - 按条件从数组中删除子数组
- jquery - 如何让 Ajax 加载/显示数据并返回变量
- mysql - mysql设置当前用户为默认值
- spring - 如何重试失败的操作?