setup() 메서드 내의 배열(반복())에 액세스하고 싶습니다.

setup() 메서드 내의 배열(반복())에 액세스하고 싶습니다.

여기 이름이 붙은 배열이 있습니다.Title에data()어레이를 반환하고 있습니다(값이 동적으로 추가되고 있음). 그리고 액세스하고 싶습니다.Title의 배열onDrop()내부의 방법setup()하지만 그렇다고 합니다.undefined누가 이 오류를 도와줄 수 있습니까?

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,
    };
  },
};

설정 기능으로 데이터와 메서드를 이동할 수 있습니다.

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>

언급URL : https://stackoverflow.com/questions/72359273/i-want-to-access-my-arraywhich-is-in-return-inside-a-setup-methods-method