How can I use refs in my vue component (preferably in a loop) to manipulate multiple dom elements in my template? Let's say for example that I want to apply an animation with GSAP on every <p ref="pre">
in a function. How would I do that? Like would I access them in mounted as an array or something? The current code will only apply to the first element right?
My template
<template>
<section ref="sectionText">
<p ref="pre">
text
</p>
</section>
<section ref="sectionImage">
<p ref="pre">
some more text
</p>
</section>
<section ref="sectionAudio">
<p ref="pre">
even more
</p>
</section>
<section ref="sectionVideo">
<p ref="pre">
text
</p>
</section>
</template>
My component
<script>
import gsap from 'gsap'
export default {
mounted() {
gsap.to(this.$refs.pre, 0.75, {
opacity: 0
})
}
}
</script>
This approach ensures that you can apply animations to multiple DOM elements using refs in a loop.
<template>
<section ref="sectionText">
<p :ref="setRef">
text
</p>
</section>
<section ref="sectionImage">
<p :ref="setRef">
some more text
</p>
</section>
<section ref="sectionAudio">
<p :ref="setRef">
even more
</p>
</section>
<section ref="sectionVideo">
<p :ref="setRef">
text
</p>
</section>
</template>
<script>
import { gsap } from 'gsap';
export default {
data() {
return {
preRefs: []
};
},
methods: {
setRef(el) {
if (el) {
this.preRefs.push(el);
}
}
},
mounted() {
this.preRefs.forEach((pre) => {
gsap.to(pre, 0.75, {
opacity: 0
});
});
}
}
</script>