Here I have an array named Title in data() which is returning my array (values are getting added dynamically) and I want to access that Title array in the onDrop() method inside setup(), but it says it is undefined. Can anyone help me with this error.
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,
};
},
};You can move your data and methods to setup function:
import { ref } from 'vue'
export default {
name: "App",
components: {
Home,
Section,
},
setup() {
const title = ref([])
const sectionTitle = (Title) => {
const newSectionTitle = {
Title: Title,
};
title.value.push(newSectionTitle);
}
const onremoveSection = (Index) => {
title.value.splice(Index, 1);
}
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 {
title,
startDrag,
onDrop,
sectionTitle,
onremoveSection
};
},
};
</script>