報錯內容

Uncaught runtime errors: × ERROR this.$set is not a function TypeError: 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;
},

您好，我是肥晨。 歡迎關注我獲取前端學習資源，日常分享技術變革，生存法則；行業內幕，洞察先機。