解决Computed property was assigned to but it has no setter报错问题

可狗可乐

已于 2022-07-06 10:22:26 修改

阅读量9.8k

点赞数

文章标签： javascript vue.js

于 2022-07-06 09:57:51 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43773218/article/details/125633170

版权

修改前代码：

这里除了在store文件下的uesr.js中添加数据外

还需要在getters.js中把新添加的ifRead添加进getters

直接通过mapgetters来获取数据，其中的ifRead是我在若依源码中添加的数据，这时候的报错就是Computed property ‘ifRead’ was assigned to but it has no setter。

解决办法：在computed中给ifRead添加get和set

ifRead:{
      get(){
        return this.$store.state.user.ifRead
      },
      set(val){
        return this.$store.state.user.ifRead = val
      }
    },

在get中通过this.$store.state.user.ifRead来手动获取。

注意在set里也要修改vuex里面的值，不然会内存溢出报错(也是听说的...)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

可狗可乐

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

前端开发：Vue报错Computed property “show“ was assigned to but it has no setter的解决方法

全沾软贱开发攻城狮

07-10

1万+

在运行Vue项目之后，浏览器控制台会提示一个警告提示，具体的警告提示信息如下所示：通过控制台的警告提示，可以窥探一二，提示的大概意思就是虽然分配了计算属性“show”，但是它没有setter。也就是子组件中定义的计算属性缺少setter，使用过计算属性的开发者应该都明白，该警告提示通常发生在组件内给计算属性赋值的时候如果没有显示声明的setter，就会有该报错提示；在计算属性Computed中定义属性只有一个return，而且在其他地方进行了赋值操作，就导致了这个报错警告。那么分析到这里，问题就

Computed property “XXX” was assigned to but it has no setter错误

JackieDYH的博客

06-14

2387

当你使用Vuex中state中状态时，在Vue中使用了v-model绑定数据报错原因组件中v-model=“XXX”，而XXX是vuex state中的某个变量 vuex中是单项流，v-model是vue中的双向绑定，但是在computed中只通过get获取参数值，没有set无法改变参数值解决在computed中添加get和set 将v-model改成:value ...

参与评论您还未登录，请先登录后发表或查看评论

Vue computed 报错：Computed property ‘ ‘ was assigned to but it has no setter 错误原因分析与解决办法

热门推荐

object not found的博客

08-15

7万+

最近在封装Vue模块时，借助Vue的Computed属性监听传递的数据，但是开发调试过程中控制台取提示。，控制台则会打印如上错误。那么顺着这个方向，继续排查错误。这种方法虽然解决了目前的问题，但是会出现一个新问题，如下。在要使用该模块数据的组件computed里添加此代码。目前不知道解决办法，有知道的小伙伴可以给我留言。都应该知道，该错误提示通常发生在组件内为。将组件计算属性里的代码注释掉（下下策）属性赋值的时候，如果没有显示的声明。根据控制台错误提示，组件中定义的。以下是我的代码user.js。...

解决Computed property XX was assigned to but it has no setter.报错修改计算属性的值

weixin_49098968的博客

04-10

3007

当我们尝试修改一个计算属性时，就会收到如上图的一个报错。如果想要修改计算属性的值，需要书写setter

【Bug日志】Vue computed 报错：Computed property was assigned to but it has no setter 错误原因分析与解决办法

云间月

10-14

1万+

【Bug日志】Vue computed 报错：Computed property was assigned to but it has no setter 错误原因分析与解决办法错误描述最近在封装Vue组件时，借助Vue的Computed属性监听父组件传递到子组件的数据，但是开发调试过程中控制台取提示Computed property was assigned to but it has no setter 错误。控制台报错如下：错误分析根据控制台错误提示，组件中定义的computed属性缺少se

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

肖帅的博客

02-13

4万+

提示此问题，是因为在computed 里面定义的属性只有一个return返回。因为在其他地方进行了赋值操作，导致提示此错误！如下代码所示：更改之前的代码： computed: { drCountData() { return this.$store.state.drCountData; }, },...

Vue报错：Computed property “XX“ was assigned to but it has no setter.解决方法

樱井萧的博客

01-18

7341

Vue报错：Computed property “XX” was assigned to but it has no setter. 背景：用vuex管理数据状态，state.js 中有定义 isAllChecked: false, vue的cart页面有使用vant的标签 <van-checkbox v-model="item.isCheck" :name="item.shopId"

【error】vue-cli3 报Computed property “tableData” was assigned to but it has no setter.

mao_mao37的博客

07-31

4298

对于vuex，使用getter获取state数据，并绑定到组件上，是很常规的操作但是在严格模式下，在属于vuex的state上使用v-model这种需要双向绑定的数据类型，单单使用getter就会报错： Computed property “searchWebName” was assigned to but it has no setter. 错误代码如下： <!--vue--...

vue+ts Computed property “XX“ was assigned to but it has no setter.报错

guoying_nice的博客

03-18

412

vue+ts Computed property “XX” was assigned to but it has no setter.报错 .vue 文件 get custom_field() { return this.$store.state.vuexlist.custom_field } set custom_field(value) { this.$store.commit('vuexlist/setcustom_field', value) } action.ts

Computed property "XXX" was assigned to but it has no setter

寂寥人生

12-03

5014

vuex的使用中报这个错误，原因是v-model双向绑定造成 vuex中是单项流，v-model是vue中的双向绑定，但是在computed中只通过get获取参数值，没有set无法改变参数值解决办法： computed中添加get和set collapseMenu:{ get(){ returnthis.$store.stat...

解决： Computed property “fullName“ was assigned to but it has no setter.问题

m0_63797399的博客

04-28

1968

问题：Computed property "fullName" was assigned to but it has no setter.报错，是说尝试给一个没有 setter 函数的计算属性赋值，这是不被允许的。给他一个set方法，即完整写法： -> 获取 + 设置。

Computed property “xxx“ was assigned to but it has no setter.

芳草萋萋鹦鹉洲哦

05-12

8813

Computed property “xxx” was assigned to but it has nosetter：计算属性“inputValue”被赋值，但它没有setter。原因：组件中v-model=“XXX”，而XXX是vuex state中的某个变量 vuex中是单项流，v-model是vue中的双向绑定，但是在computed中只通过get获取参数值，没有set无法改变参数值解决： vuex公共变量：在computed中添加get和set computed: { /.

bug例子：计算属性没有setter.Computed property "xxxx" was assigned to but it has no setter.

weixin_41796631的博客

12-06

1万+

bug 提示：计算属性没有设置 setter 原因：计算属性中没有设置 setter 有bug 代码 new Vue({ el: '#demo', data:{ docState:"saved" }, computed: { buttonMessage:{ get:function (){ switch (this.docState) ...

Computed property was assigned to but it has no setter.

d1063270962的博客

02-08

3572

今天有一个很奇怪的bug，报错的原因我们可以看的很清楚，计算属性没有设置setter 这是计算属性源代码，计算属性有getter和setter，默认只有getter，需要时可以设置setter computed:{ isActive(){ return this.$route.path.indexOf(this.path) !== -1 } }, 虽然效果仍然可以实现，但是就是每次用该数据都会报错，看了vue官方文档官方演示也是不带setter的，为啥我不设置set

Computed property “name“ was assigned to but it has no setter.报错解决办法

Taurus_666

06-29

5183

Computed property "name" was assigned to but it has no setter.报错解决

关于Computed property “username“ was assigned to but it has no setter.报错解决方法

jewels_w的博客

07-03

944

Computed property "username" was assigned to but it has no setter.报错解决方法

解决Computed property “name“ was assigned to but it has no setter.问题

weixin_43348064的博客

09-09

2万+

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

Computed property "xxxx" was assigned to but it has no setter

weixin_30922589的博客

06-19

966

有时候我们在运行我们的项目的时候会出现如下警告原因：一个计算属性，如果没有设置 setter，也就是传入的是一个函数，或者传入的对象里没有 set 属性，当你尝试直接改变这个计算属性的值，都会报这个错误，计算属性默认只有getter。解决：把computed中的route属性改成如下格式 computed: { route () { 　 // getter ...

Computed property “ “ was assigned to but it has no setter

真爱一生的博客

03-25

1235

计算属性调用时报图1 的警告，提示此问题，是因为在computed 里面定义的属性只有一个return返回。因为在其他地方进行了赋值操作，导致提示此错误！修改为以下代码即可 computed:{ GBFLTitle:{ get(){ return this.model.detailList[0].guobflid.title }, set(){ if(this.model.detailList[0].guobflid){ return this.model.detailList[0].guobf...

报错Computed property "transData" was assigned to but it has no setter.

最新发布

03-12

<think>好的，我现在需要解决用户的问题：“报错Computed property "transData" was assigned to but it has no setter.”。这个错误通常出现在Vue.js中，当用户尝试修改一个计算属性但没有为其定义setter方法时。首先，我需要回忆Vue.js的计算属性机制。计算属性默认只有getter，没有setter，所以当直接给计算属性赋值时就会报这个错误。用户提供的代码中，他们直接修改了this.transData，例如通过forEach循环修改数组元素，然后可能将整个数组重新赋值给transData。这时候如果transData是一个计算属性，就会触发这个错误。需要检查transData在Vue组件中的定义方式。接下来，我需要考虑用户可能的代码结构。假设他们在组件中这样定义transData： computed: { transData() { return this.$store.state.someModule.transData; } } 这种情况下，transData是一个计算属性，只有getter，没有setter。当用户执行this.transData = ...时，就会因为没有setter而报错。用户可能在尝试直接修改transData，但由于计算属性本身是只读的，必须通过Vuex的mutation或action来修改状态，或者为计算属性添加setter。解决方案有两种主要方向：一种是修改计算属性，添加setter；另一种是避免直接修改计算属性，转而使用其他方式更新数据源。比如，用户可能应该直接操作Vuex中的原始数据，而不是通过计算属性来赋值。另外，用户之前的代码中使用了forEach循环来修改transData的元素，并重新赋值，这可能导致transData被整体替换，从而触发set操作。如果transData是计算属性，没有setter的话，自然会报错。需要建议用户检查transData的定义，确认是否是计算属性，并考虑是否需要添加setter，或者是否应该直接修改源数据而不是计算属性。如果transData依赖于Vuex的状态，那么正确的做法应该是通过提交mutation来修改状态，而不是直接修改计算属性。同时，用户之前的优化建议中使用了map和filter，这可能改变了原始数组的引用，导致需要重新赋值给transData，从而触发错误。所以需要指出，在Vue中，直接替换计算属性的值是不允许的，必须通过setter或者直接操作源数据。总结处理步骤：1. 确认transData是否为计算属性；2. 分析是否应该添加setter；3. 或者修改代码逻辑，通过Vuex或其他状态管理方法正确更新数据；4. 调整之前的优化代码，避免直接赋值给计算属性。</think>这个报错发生在 Vue.js 中，表示你正在尝试修改一个**计算属性(computed property)** `transData`，但没有为其定义 setter 方法。以下是具体分析和解决方案： --- ### 🔍 错误原因分析假设你的代码中有如下定义： ```javascript computed: { transData() { // 只有 getter 的计算属性 return this.$store.state.inventoryData } } ``` 此时如果执行 `this.transData = [...]` 这类赋值操作，就会触发该错误，因为： - **计算属性默认只读**：Vue 的计算属性默认只有 `getter` 没有 `setter` - **直接赋值冲突**：你在原代码中通过 `this.transData.forEach(...)` 修改了该属性 --- ### 💡 解决方案 #### 方案一：添加 setter (适用于需要双向绑定) ```javascript computed: { transData: { get() { return this.$store.state.inventoryData }, set(newVal) { this.$store.commit('UPDATE_INVENTORY', newVal) // 通过 Vuex mutation 更新 } } } ``` #### 方案二：改用 data 属性 (适用于本地数据) ```javascript data() { return { transData: [] // 初始化为空数组 } } // 后续通过 this.transData = ... 修改 ``` #### 方案三：使用深拷贝操作 (适用于保留计算属性) ```javascript // 创建新数组引用 const modifiedData = this.transData.map(item => ({ ...item, DOUTQTY: Math.min(item.DPHOUTQTY, Math.max(item.DSTOCKQTY, 0)), checked: item.DSTOCKQTY > 0 })) // 通过 Vuex action 提交修改 this.$store.dispatch('updateInventory', modifiedData) ``` --- ### ⚠️ 特别注意 1. **响应式更新原则**： - 如果数据源在 Vuex store 中，必须通过 `mutations` 修改 - 若直接操作计算属性，需像这样更新源数据： ```javascript this.$store.state.inventoryData = [...modifiedData] ``` （需确保开启了 Vuex 的严格模式） 2. **不可变数据模式**推荐： ```javascript // 优先使用不影响原数组的方法 const newData = this.transData.map(...) this.$store.commit('UPDATE_DATA', newData) ``` --- ### 🌰 实际应用修改示例 ```javascript // 优化后的代码 const modifiedData = this.transData.map(item => { const availableStock = item.DSTOCKQTY return { ...item, DOUTQTY: Math.min(item.DPHOUTQTY, Math.max(availableStock, 0)), checked: availableStock > 0 } }) // 通过 mutation 提交修改 this.$store.commit('UPDATE_TRANS_DATA', modifiedData) ``` --- ### 📌 总结建议 | 场景 | 推荐方案 | 优点 | |-------|----------|------| | 需要响应式同步 | 添加 setter + Vuex | 保持数据流清晰 | | 纯本地数据操作 | 改用 data 属性 | 实现简单 | | 需要保留计算属性 | 深拷贝 + 提交修改 | 符合单向数据流 | 建议优先选择**方案三**，通过 Vuex 的状态管理保证数据流的可追踪性，这也是 Vue 官方推荐的最佳实践。