Как найти дочерний элемент с помощью родительской ссылки? - PullRequest
Новая
       13

Как найти дочерний элемент с помощью родительской ссылки?

1 голос
/ 24 апреля 2019

Мне нужно получить доступ к предметам, используя vue's this.$refs, но я не знаю, как этого добиться. Я не хочу использовать jQuery для этого. 

<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>

Я знаю, как это сделать с помощью jQuery: 

const svgPath = $('#parent path');
// or may be with:
const svgPath = $('#parent').find('path');

Я чувствую, что могу получить querySelector, но не уверен, как смешать и сопоставить переменную и строку: 

const { svgItem } = this.$refs;
const selector = document.querySelector(svgItem > 'path')  // something like this :)

const timeline = new TimelineLite();
timeline.to(selector, 5, { opacity: 0.3 }

Спасибо.

1 Ответ

2 голосов
/ 24 апреля 2019

Метод querySelector также на HTML Элемент . Он доступен не только на document. 

const { svgItem } = this.$refs;
const svgPath = svgItem.querySelector('path');
...