Uncaught TypeError: this.set is not a function in vue js

Question

this is what error i am getting when i try to edit the array value

我想更改特定索引上的数组值，但是当我尝试这样做时，控制台中显示错误，任何人都可以帮我解决这个问题。

<script>
//import Vue from 'vue'
import Task from "./Task.vue";
import TaskName from "./TaskName.vue";
export default {
  components: {
    Task,
    TaskName,
  },
  data() {
    return {
      Task: [],
    };
  },
  methods: {
    sectionTask(Task) {
      const newTaskTitle = {
        Task: Task,
      };
      this.Task.push(newTaskTitle);
    },
    onremoveTask(Index){
        this.Task.splice(Index, 1)
    },
    onUpdateTaskTitle(Index,newTaskTitle){
      console.log(Index);
      console.log(newTaskTitle);
      this.$set(this.Task, Index, newTaskTitle);
    },
  },
};
</script>

<template>
  <TaskName @section-task="sectionTask" />
  <Task :Task="Task" @remove="onremoveTask" @update="onUpdateTaskTitle"/>
</template>

Answer 1

在 Vue 3 中，this.$set 被移除。参见 breaking changes docs。

[].splice can take values to add new values to the array。因此，对于您的示例，您可以将 this.$set 替换为：

this.Task.splice(Index, 1, newTaskTitle);

这将从 Index 开始的 1 个值替换为 newTaskTitle。

Answer 2

我使用 Vue.js 中的“地图”函数解决了这个错误。下面我正在更新代码你可以看看

这是发生了什么：当您尝试更新将在某处引用的数组时，Vue 将无法直接更新它，因此首先制作一个副本数组并对其进行更改，然后您可以更新数组使用地图功能。希望你能得到答案！

<script>
//import Vue from 'vue'
import Task from "./Task.vue";
import TaskName from "./TaskName.vue";
export default {
  components: {
    Task,
    TaskName,
  },
  data() {
    return {
      Task: [],
    };
  },
  methods: {
    sectionTask(Task) {
      const newTaskTitle = {
        Task: Task,
      };
      this.Task.push(newTaskTitle);
    },
    onremoveTask(Index){
        this.Task.splice(Index, 1)
    },
    onUpdateTaskTitle(Index,newTaskTitle){
      console.log(Index);
      console.log(newTaskTitle);
      console.log(this.Task);
      const TaskCopy = this.Task.map(function(element, index) {
         if(index === Index){
           element.Task = newTaskTitle
         }
        return TaskCopy;
      });
    },
  },
};
</script>

<template>
  <TaskName @section-task="sectionTask" />
  <Task :Task="Task" @remove="onremoveTask" @update="onUpdateTaskTitle"/>
</template>

Uncaught TypeError: this.set is not a function in vue js

Uncaught TypeError: this.set is not a function in vue js

javascript

vue.js

vuejs3