vue3报错：Uncaught runtime errors: × ERROR this.$set is not a function TypeError: this.$set is not a fu

---

报错内容

Uncaught runtime errors: × ERROR this.$setisnotafunctionTypeError:this.$set is not a function at Proxy.editRow (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/basic/component.vue?vue&type=script&lang=js:147:12) at onClick (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/basic/component.vue?vue&type=template&id=0150519c&scoped=true:582:39) at callWithErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:387:19) at callWithAsyncErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:394:17) at emit (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5828:5) at eval (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:7301:45) at handleClick (webpack-internal:///./node_modules/element-plus/es/components/button/src/use-button.mjs:73:5) at callWithErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:387:19) at callWithAsyncErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:394:17) at HTMLButtonElement.invoker (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:932:83)

解决方法

根据错误信息 this.$set is not a function，可以确定在 Vue 3 中，this.$set 方法已经被移除了。在 Vue 3 中，直接使用 Vue.set 也不再适用，而是推荐使用 Vue.reactive 或直接修改对象属性来触发响应式更新。

为了修复这个问题，可以直接修改 quoteData 数组中的对象属性，而不需要使用 this.$set。以下是具体的修改步骤：
将 方法中的this.$set替换为直接修改对象属性：

editRow(index) {
  this.quoteData[index].editing = true;
},

您好，我是肥晨。
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。