My issue involves accessing an array named Title in the data() method, where values are dynamically added. I am trying to access this Title array within the onDrop() method inside the setup() function. However, I keep receiving an error stating that it is undefined. Can anyone help me resolve this problem?
import Home from "./components/Home.vue";
import Section from "./components/Sections.vue";
export default {
name: "App",
components: {
Home,
Section,
},
data() {
return {
Title: [],
};
},
methods: {
sectionTitle(Title) {
const newSectionTitle = {
Title: Title,
};
this.Title.push(newSectionTitle);
},
onremoveSection(Index) {
this.Title.splice(Index, 1);
},
},
setup() {
const startDrag = (event, index) => {
console.log(index);
event.dataTransfer.dropEffect = "move";
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("TitleIndex", index);
};
const onDrop = (event, indx) => {
console.log(indx);
const index = event.dataTransfer.getData("TitleIndex");
console.log(index);
let indexToMoveFrom = index;
let indexToMoveTo = indx;
const shifter = (Title, indexToMoveFrom, indexToMoveTo) => {
let buff = Title[indexToMoveFrom];
for (let i = indexToMoveFrom; i < indexToMoveTo; i++) {
Title[i] = Title[i + 1];
}
Title[indexToMoveTo] = buff;
console.log(Title);
};
shifter(Title, indexToMoveFrom, indexToMoveTo);
};
return {
startDrag,
onDrop,
};
},
};