关于使用Vuex getters属性报错

最新推荐文章于 2024-08-21 08:21:25 发布

wjy_0214

最新推荐文章于 2024-08-21 08:21:25 发布

阅读量1k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_52862540/article/details/124494612

版权

本文探讨了在Vue项目中，如何修复由于在Vuex computed属性中使用v-model导致的'editableTabsValue'无setter错误。提供两种解决方案：一是通过创建getter和setter重定义，二是将v-model更改为:value以实现单向数据流。

摘要由CSDN通过智能技术生成

Computed property "editableTabsValue" was assigned to but it has no setter.问题解决

vuex的使用中报这个错误，原因是v-model双向绑定造成

vuex中是单项流，v-model是vue中的双向绑定，但是在computed中只通过get获取参数值，没有set无法改变参数值

解决方法：1.给editableTabsValue重新赋值给一个变量设置getter，setter

<el-tabs v-model="editableTabsValue" type="card" @tab-click="tabClick" @tab-remove="removeClick">
        <el-tab-pane :key="item.name" v-for="(item, index) in editableTabs" :label="$t(`menus.${item.name}`)"
            :name="item.name" :closable="item.closable"></el-tab-pane>
</el-tabs>

computed: {
        ...mapGetters(['editableTabs','editableTabsValue']),
        defaultTabs: {
            get() {
                return this.editableTabsValue
            },
            set(v) {
                this.editableTabsValue = v
            }
        } 
     }

2.或者把v-model换成：value

<el-tabs :value="editableTabsValue" type="card" @tab-click="tabClick" @tab-remove="removeClick">
        <el-tab-pane :key="item.name" v-for="(item, index) in editableTabs" :label="$t(`menus.${item.name}`)"
            :name="item.name" :closable="item.closable"></el-tab-pane>
</el-tabs>