How to implement scrolling to a variable of a specified element in Vue 3?
P粉060528326
2023-08-28 20:17:07
<p>I have the following function in pure JavaScript to scroll to an element and I want to convert this code to Vue 3. </p>
<pre class="brush:php;toolbar:false;">var source = ''
function showScrollInto(currentLocation, toLocation) {
source = currentLocation // The location to return after hiding the section
document.getElementById(toLocation).style.display = 'block'
document.getElementById(toLocation).scrollIntoView()
}</pre>
<p>and return to the original location: </p>
<pre class="brush:php;toolbar:false;">document.getElementById(source).scrollIntoView()</pre>
<p>Call showScrollInto when the button is clicked: </p>
<pre class="brush:php;toolbar:false;"><button onClick="showScrollInto('top', 'interesse')">TITLE</button></pre>
<p>Now I convert the function into a method and try: </p>
<pre class="brush:php;toolbar:false;">import { ref } from "vue"
var source = ""
const toLocation = ref('Vue.js')
export default {
name: "App",
data() {
return {
hideAlleClubs: true,
hideIkWilKennismaken: true,
hideAlleLocaties: true,
hideMeerOverKegelen: true,
hideInteresse: true
}
},
methods: {
showScrollInto(event, currentLocation, toLocation) {
source = currentLocation // The location to return after hiding the section
this.hideInteresse = false
this.$refs.toLocation.scrollIntoView({ behavior: 'smooth'})
// document.getElementById(toLocation).style.display = 'block'
// document.getElementById(toLocation).scrollIntoView()
}
}
}</pre>
<p>Call showScrollInto by clicking the button: </p>
<pre class="brush:php;toolbar:false;"><button @click="showScrollInto($event, 'kosten', 'interesse')">TITLE</button></ pre>
<p>The elements to scroll to are as follows: </p>
<pre class="brush:php;toolbar:false;"><section class = "top-level-section" v-show="!hideInteresse" ref="interesse"></ pre>
<p>Passing a variable into the method works fine, but I can't figure out how to scroll to a position where the position is a variable. </p>
<p>this.$refs.interesse.scrollIntoView({ behavior: 'smooth'}) can be used to scroll to the element with id 'interesse', but I don't know how to convert that element name into a variable.
Additionally, I understand that this.$refs is not a Vue 3 notation and should be converted to something like ref('value'), but I don't know how to do that.</p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
First, read Vue’s documentation about template references. There is a toggle button in the upper left corner of the page to switch between options API and combined API syntax.
Using variable references depends on the Vue version and/or syntax you are using.
Vue 2 / Options API
The variable should be a string matching the ref on the element
const refVar = "someRefName" this.$refs[refVar].scrollIntoView({ behavior: "smooth" });Vue 3 / Combination API
Variables should be assigned the value
ref()(requires import). The name of the constant should match the ref name on the elementconst someElement = ref() // 赋值给模板中的某个元素 someElement.value.scrollIntoView({ behavior: "smooth" });Options API and composition API should not be mixed, so only one syntax is used.
In both cases you can have multiple elements with the same ref name, at which point Vue will create an array containing all the refs with the same name, so to access a specific element you will also need to use an index.
The following are some simplified examples. Hopefully they solve your remaining problems and you can modify them as needed.
Options API codesandbox example
Combined API codesandbox example