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

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

i want to change an array value on particular index but when i try to do that this i error is being show in console can anyone help me with this.

<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>

CodePudding user response：

In Vue 3, this.$set was removed. See breaking changes docs.

CodePudding user response：

i solved this error using "map" function which is there in Vue js . below i am updating the code you can check it out. Here waht happening is when you try to update array that will be refferenced somewhere so vue wont be directly able to update it so first make copy array and that make changes with it and you can update the array using map function hope you got your answere.

<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>