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

最新推荐文章于 2025-05-15 22:46:52 发布

guoying_nice

最新推荐文章于 2025-05-15 22:46:52 发布

阅读量412

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/guoying_nice/article/details/114966094

本文介绍了在Vue + TypeScript项目中遇到的'Computed property “XX” was assigned to but it has no setter.'错误。该错误通常发生在尝试为Computed属性赋值而该属性没有设置器(setter)时。文章会详细讨论错误原因并提供解决方案，包括正确使用计算属性和状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 文件依据返回赋值

 // 获取列表信息
  INFO({
    commit, dispatch

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

guoying_nice

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
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

2399

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

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

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

weixin_30922589的博客

06-19

969

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

vue3+vite+ts--computed计算属性的使用

m0_60893808的博客

05-23

3512

当改变整个testComputed时，才会触发set方法，如果testComputed是对象改变对象的某个属性的值时，不会触发set方法。当testComputed 依赖的值改变时，就会触发get方法。返回值val可以赋值给其他，不可以赋值给自己。

解决 “Computed property was assigned to but it has no setter“ 警告

最新发布

weixin_43177080的博客

05-15

1016

在Vue.js中，当你尝试修改一个仅定义了getter方法的计算属性时，会触发错误。这是因为计算属性默认只有getter，没有setter。要解决这个问题，你可以采取以下方法：1. 为计算属性添加setter方法，允许双向绑定；2. 如果属性不需要复杂计算，可以改用data属性；3. 使用方法来处理值的变更。最佳实践是，如果需要双向绑定，使用带有getter/setter的计算属性，并配合.sync修饰符或v-model使用。如果只是本地状态，使用data属性；需要复杂操作时，使用方法。通过这些方法，可以安

vue3+ts 第六章（认识computed计算属性）

lipenghao111的博客

03-31

1768

删除总价：{{ total }}物品</th><th>单价</th><th>数量</th><th>总价</th><th>操作

vue+ts computed中Property ‘funnelData‘ does not exist on type ‘Vue‘.问题原因及解决方法

我是我

07-14

1326

Property 'funnelData' does not exist on type 'Vue'.

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

weixin_43348064的博客

09-09

2万+

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

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

樱井萧的博客

01-18

7345

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

4301

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

重写vue的computed的get和set

weixin_38547641的博客

09-01

705

比如，有一个checkList数组，在computed中重写它的get和set computed() { checkList: { get() { //return 一个值 } set(newVal) { } } }

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

m0_63797399的博客

04-28

1975

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

vue计算属性computed源码解析笔记

m0_49159526的博客

07-16

805

源码学习的笔记吧，还存在一些问题，会继续补充！ 1. 使用示例 (官网) var vm = new Vue({ data: { a: 1 }, computed: { // 计算属性的 getter // 仅读取 aDouble: function () { // `this` 指向 vm 实例 return this.a * 2 }, // 读取和设置 aPlus: { get: function () {

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 “name“ was assigned to but it has no setter.报错解决办法

Taurus_666

06-29

5208

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

计算属性computed和侦听属性watch有什么区别？你会使用它们吗？

zhang_hai_cheng的博客

08-29

1358

computed有缓存，是把该变量指向每次的执行结果，当响应式依赖变化时，vue会自动再次执行，而methods是把该变量指向函数，在用到的地方都会再次执行，而且当dom更新的时候，vue也会重新执行对应的方法，因此需要注意避免死循环，watch无所谓缓存不......

vue的源码学习之七——4.计算属性(computed)

路在脚下，幸福在手中，莫贪！！！！！

12-21

1822

1 介绍版本：2.5.17 我们使用vue-vli创建基于Runtime+Compiler的vue脚手架。学习文档：https://ustbhuangyi.github.io/vue-analysis/reactive/computed-watcher.html 2 功能我们知道computed实时检测属性有没有发生变化，当发...

vue核心面试题（computed的实现原理或特点）

王三六博客

06-28

3198

概念： computed是一个计算属性,类似于过滤器,对绑定到view的数据进行处理，计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。它用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理。原理：在initState的时候会初始化initComputed，默认初始化计算属性initComputed的时候会创建一个watcher（new Watcher），这个watcher有一...

报错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 官方推荐的最佳实践。