Vue 3에서 지정된 요소의 변수로 스크롤을 구현하는 방법은 무엇입니까?

Question

순수 JavaScript에 다음 함수를 사용하여 요소로 스크롤하고 이 코드를 Vue 3으로 변환하고 싶습니다.

var 소스 = ''
함수 showScrollInto(currentLocation, toLocation) {
  source = currentLocation // 섹션을 숨긴 후 반환할 위치
  document.getElementById(toLocation).style.display = '차단'
  document.getElementById(toLocation).scrollIntoView()
}

원래 위치로 돌아갑니다.

document.getElementById(source).scrollIntoView()

버튼을 클릭하면 showScrollInto를 호출합니다.

<button onClick="showScrollInto('top', 'interesse')">TITLE</button>

이제 함수를 메소드로 변환하고 다음을 시도해 보겠습니다.

"vue"에서 { ref } 가져오기
var 소스 = ""
const toLocation = ref('Vue.js')

기본값 내보내기 {
    이름: "앱",
    데이터() {
        반품 {
            hideAlleClubs: 사실,
            hideIkWilKennismaken: 사실,
            hideAlleLocaties: 사실,
            hideMeerOverKegelen: 사실,
            hideInteresse: 사실
        }
    },
    방법: {
        showScrollInto(이벤트, currentLocation, toLocation) {
            source = currentLocation // 섹션을 숨긴 후 반환할 위치
            this.hideInteresse = 거짓
            this.$refs.toLocation.scrollIntoView({ 동작: '부드러운'})
            // document.getElementById(toLocation).style.display = '블록'
            // document.getElementById(toLocation).scrollIntoView()
        }
    }
}

버튼 클릭 시 showScrollInto를 호출합니다.

TITLE
스크롤할 요소는 다음과 같습니다. 

메서드에 변수를 전달하는 것은 잘 작동하지만 위치가 변수인 위치로 스크롤하는 방법을 알 수 없습니다. 
this.$refs.interesse.scrollIntoView({behavior: 'smooth'})를 사용하여 ID가 ​​'interesse'인 요소로 스크롤할 수 있지만 해당 요소 이름을 변수로 변환하는 방법을 모르겠습니다. .
또한 this.$refs는 Vue 3 표기법이 아니며 ref('value')와 같은 것으로 변환해야 한다는 것을 알고 있지만 어떻게 해야 하는지 모르겠습니다.
            

Answer 1

먼저 템플릿 참조에 대한 Vue의 문서를 읽어보세요. 옵션 API와 결합된 API 구문 간에 전환할 수 있는 토글 버튼이 페이지 왼쪽 상단에 있습니다.

참조용 변수 참조 사용은 사용 중인 Vue 버전 및/또는 구문에 따라 다릅니다.

으아악

Vue 2 / 옵션 API

변수는 요소의 참조와 일치하는 문자열이어야 합니다

으아악

Vue 3 / 조합 API

변수에는 ref() 값이 할당되어야 합니다(가져와야 함). 상수 이름 은 요소의 참조 이름과 일치해야 합니다

으아악

옵션 API와 구성 API를 혼합할 수 없으므로 하나의 구문만 사용합니다.

두 경우 모두 동일한 참조 이름을 가진 여러 요소가 있을 수 있으며, 이때 Vue는 동일한 이름을 가진 모든 참조를 포함하는 배열을 생성하므로 특정 요소에 액세스하려면 인덱스도 사용해야 합니다.

다음은 몇 가지 간단한 예입니다. 남은 문제가 해결되기를 바라며 필요에 따라 수정할 수 있습니다.

옵션 API 코드샌드박스 예시

결합된 API 코드샌드박스 예시