I'm trying to figure out how to access items using vue's this.$refs without relying on jQuery. Here is the setup I have:
<template>
<div>
<svg ref="svgItem">
<path d="M899.33,118.33h-81.7v90.2h-31.3V2.07h31.3v88.5h81.7V2.07h31.29V208.53H899.33Z" />
</svg>
</div>
</template>
<script>
import { TimelineLite } from 'gsap';
export default {
mounted() {
const { svgItem } = this.$refs;
const timeline = new TimelineLite();
timeline.to(svgItem, 5, { opacity: 0.3 });
// timeline.to('${svgItem} > path', 5, { opacity: 0.3 }); // something like this :)
},
};
</script>
In the past, I would achieve this with jQuery like so:
const svgPath = $('#parent path');
// or maybe:
const svgPath = $('#parent').find('path');
Now, I am considering using querySelector but unsure how to dynamically mix variables and strings together:
const { svgItem } = this.$refs;
const selector = document.querySelector(svgItem > 'path') // something like this :)
const timeline = new TimelineLite();
timeline.to(selector, 5, { opacity: 0.3 });
If you could provide some guidance, it would be greatly appreciated.