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

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

원래 위치로 돌아갑니다.

document.getElementById(source).scrollIntoView()

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

TITLE

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

"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')와 같은 것으로 변환해야 한다는 것을 알고 있지만 어떻게 해야 하는지 모르겠습니다.