В Vue, как я могу получить селектор стиля css из $ ref?

Question

Я могу использовать $ ref для выделения правильного фрагмента html, но мне нужен селектор css для этого фрагмента. Я бы хотел, чтобы это сработало ...

this.$refs.myref.querySelector()

Answer 1

На самом деле вы можете использовать querySelector для ссылки , если ссылка относится к элементу DOM, а не к дочернему компоненту Vue.Тот факт, что this.$refs.myref.querySelector() не работает для вас, заставляет меня поверить, что myref является компонентом, а не элементом.

Если ссылка является компонентом Vue, вы все равно можете ссылаться на корневойЭлемент DOM компонента через его свойство $el.Итак, в вашем случае: this.$refs.myref.$el.querySelector().

---

Вот простой пример фрагмента, иллюстрирующий разницу:

Vue.config.devtools = false;
Vue.config.productionTip = false;

Vue.component('child', {
  template: `
    <div>
      <span class="inside-child">Inside Child</span>
    </div>
  `
})

new Vue({
  el: '#app',
  mounted() {
    console.log(this.$refs.child.$el.querySelector('.inside-child'));
    console.log(this.$refs.div.querySelector('.inside-div'))
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <child ref="child"></child>
  <div ref="div">
    <span class="inside-div">Inside Div</span>
  </div>
</div>

Answer 2

вы пробовали:

this.$refs.myref[0].$el

равно

document.querySelector(’.myref’)