Vue 3에서 지정된 요소의 변수로 스크롤을 구현하는 방법은 무엇입니까?
<p>순수 JavaScript에 다음 함수를 사용하여 요소로 스크롤하고 이 코드를 Vue 3으로 변환하고 싶습니다. </p>
<pre class="brush:php;toolbar:false;">var 소스 = ''
함수 showScrollInto(currentLocation, toLocation) {
source = currentLocation // 섹션을 숨긴 후 반환할 위치
document.getElementById(toLocation).style.display = '차단'
document.getElementById(toLocation).scrollIntoView()
}</pre>
<p>원래 위치로 돌아갑니다. </p>
<pre class="brush:php;toolbar:false;">document.getElementById(source).scrollIntoView()</pre>
<p>버튼을 클릭하면 showScrollInto를 호출합니다. </p>
<pre class="brush:php;toolbar:false;"><button onClick="showScrollInto('top', 'interesse')">TITLE</button></pre>
<p>이제 함수를 메소드로 변환하고 다음을 시도해 보겠습니다. </p>
<pre class="brush:php;toolbar:false;">"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()
}
}
}</pre>
<p>버튼 클릭 시 showScrollInto를 호출합니다. </p>
<pre class="brush:php;toolbar:false;"><button @click="showScrollInto($event, 'kosten', 'interesse')">TITLE</button></ 사전>
<p>스크롤할 요소는 다음과 같습니다. </p>
<pre class="brush:php;toolbar:false;"><section class = "최상위 섹션"v-show="!hideInteresse"</ 사전>
<p>메서드에 변수를 전달하는 것은 잘 작동하지만 위치가 변수인 위치로 스크롤하는 방법을 알 수 없습니다. </p>
<p>this.$refs.interesse.scrollIntoView({behavior: 'smooth'})를 사용하여 ID가 'interesse'인 요소로 스크롤할 수 있지만 해당 요소 이름을 변수로 변환하는 방법을 모르겠습니다. .
또한 this.$refs는 Vue 3 표기법이 아니며 ref('value')와 같은 것으로 변환해야 한다는 것을 알고 있지만 어떻게 해야 하는지 모르겠습니다.</p>
