【error】vue-cli3 报Computed property “tableData” was assigned to but it has no setter.
对于vuex,使用getter获取state数据,并绑定到组件上,是很常规的操作
但是在严格模式下,在属于vuex的state上使用v-model这种需要双向绑定的数据类型,单单使用getter就会报错:
Computed property “searchWebName” was assigned to but it has no setter.
错误代码如下:
<!--vue-->
<template><el-form class="searchDiv"><el-form-item label="网站名称:"><input class="inputC" v-model="searchWebName" placeholder="网站名称" /></el-form-item></el-form>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {computed: {...mapGetters(["searchWebName"]),}
}
</script><!--vuex-->
export default new Vuex.Store({state: {searchWebName:"",}getters: {searchWebName: state => {return state.searchWebName;},}
})
原因如下:在用户输入是,v-model会视图直接修改vuex中的state中的searchWebName,在严格模式下,由于这个修改不是在mutation函数中执行的,所以这里就会抛出一个错误.
1.使用监听事件提交更改的方式解决这个问题
用vuex的思维解决这个问题,监听input的输入事件,在事件回调中调用action修改state数据
<template>
<input :value="message" @input="updateMessage">
</template>
<script>
import{mapGetters} from "vuex";
export default{computed: {...mapState({message: state => state.obj.message})},methods: {updateMessage (e) {this.$store.commit('updateMessage', e.target.value)}}
}
</script>// ...
mutations: {updateMessage (state, message) {state.obj.message = message}
}
2.双向绑定的计算属性:使用带有Setter的双向绑定计算属性:
<!--vue-->
<template><el-form class="searchDiv"><el-form-item label="网站名称:"><input class="inputC" v-model="searchWebName" placeholder="网站名称" /></el-form-item></el-form>
</template><script>
import { mapGetters, mapActions } from "vuex";
export default {computed: {...mapGetters(["listProject"]),searchWebName: {get() {return this.$store.state.searchWebName;},set(value) {this.$store.commit("SET_WENNAME", value);}},}}</script>
<!--vuex-->
export default new Vuex.Store({state: {listProject:[],searchWebName: '',},mutations: {SET_PROJECT_LIST: (state, {projectlist}) => {state.listProject= projectlist},SET_WENNAME(state, val) {state.searchWebName = val},},getters: {listProject: state => {return state.listProject;},}})
推荐使用第二种方式
参考官网:https://vuex.vuejs.org/zh/guide/forms.html
【error】vue-cli3 报Computed property “tableData” was assigned to but it has no setter.相关推荐
- 前端开发:Vue报错Computed property “show“ was assigned to but it has no setter的解决方法
前言 在前端开发中,使用Vue的时候关于组件使用是非常常见的操作,而且也会遇到各式各样的问题,尤其是刚接触前端开发的开发者.本篇博文分享一下在封装关于Vue的组件的时候,通过计算属性监听父子组件传值提 ...
- vuex报错Computed property “xxx“ was assigned to but it has no setter.
当使用vuex存储数据时,常常有这样的需求:输入框显示并动态修改state中的数据. 我们第一个反应就是使用v-model直接绑定state中的数据,虽然确实可以显示和修改,但是控制台会报错,所以不能 ...
- [Vue warn]: Computed property “userInfo“ was assigned to but it has no setter.
[Vue warn]: Computed property "userInfo" was assigned to but it has no setter. 一.报错信息 二.报错 ...
- [Vue] Computed property XXX was assigned to but it has no setter.
项目过程中经常遇到如下问题: [Vue warn]: Computed property "CurrentStep" was assigned to but it has no s ...
- Vue warn]: Computed property XXXl was assigned to but it has no setter.错误
Vue warn]: Computed property "XXXl" was assigned to but it has no setter.错误 解决:直接修改HTML中的v ...
- vue 的计算属性报错Computed property “disa“ was assigned to but it has no setter.
原因: vue的计算属性不能设置,只能读取 解决:
- [Vue warn]: Computed property tabs was assigned to but it has no setter.
为什么80%的码农都做不了架构师?>>> 这种问题一般是tabs这个计算属性没有设置set方法导致该报错,因为在methods方法里面有对tabs赋值的操作.只要添加一个 se ...
- vue写前端出现错误:[Vue warn]: Computed property “editableTabs“ was assigned to but it has no setter.
源代码: computed:{//动态监控,返回tab的信息editableTabs:{get() {return this.$store.state.menus.editableTabs;}},ed ...
- Computed property XXX was assigned to but it has no setter
报错视图: 原因: 组件中v-model="XXX",而XXX是vuex state中的某个变量 vuex中是单项流,v-model是vue中的双向绑定,但是在computed中只 ...
- Computed property “value1“ was assigned to but it has no setter.
在写 Vue 项目时出现了以上报错信息,特此记录 computed: {value1() {return this.value}, } 意思是说:我在计算属性里修改 value1 这个属性时,没有使用 ...
最新文章
- 【笔记】震惊!世上最接地气的字符串浅谈(HASH+KMP)
- 编写实现atoi函数
- javascript等号判断相等流程
- Generic Host Process for Win32 Service错误
- Redis Desktop Manager 利用ssh连接 Redis
- java接口文档生成工具_接口文档生成
- iis8使用url2.0模块实现http跳转到https
- FCKeditor 上传图片和浏览服务器时提示请先登陆的解决办法
- Spark—local模式环境搭建
- docker配置阿里云镜像加速器
- 《东周列国志》第四十九回 公子鲍厚施买国 齐懿公竹池遇变
- 各种符号的英文读法读音单词
- 《NLP汉语自然语言处理原理与实践》学习二
- php限制选择图片数量,ImagePicker组件,限制选择图片数量上限(selectable={images.length 3} )失败...
- 网站速度和性能测试工具
- 目前最好的折叠屏手机也“翻车”了
- 奶爸日记-沉迷看小猪
- java全国二级考点,java计算机全国二级考试时间
- 计算机领域国家自然科学基金,计算机学院获批国家自然科学基金委人工智能代码(F06)首个重大项目...
- JAVA操作execl
热门文章
- 【图像分割】基于matlab蚁群优化模糊聚类图像分割【含Matlab源码 130期】
- ai人工智能对话了_产品制造商如何缓解对话式AI中的偏见
- php当前工作目录路径,Linux_Linux下使用Shell脚本改变当前工作路径, She - phpStudy...
- 【购买ipad 2021记录:Apple官网线上下单,直营店线下取货】
- win10远程电脑连接
- 无线网络 设置网关和服务器,我家的网络连接的IP是 192.168.1.223 我想问网关是多少 服务器是...
- angular 表单操作
- React中的三种类型组件介绍
- 通读5G 半导体产业有新商机
- Spring Cloud 与 Dubbo 对比整理(2)