VueJs получение элемента в компоненте


У меня есть компонент, как я могу выбрать один из его элементов?

Я пытаюсь получить входные данные, которые находятся в шаблоне этого компонента.

может быть несколько компонентов, поэтому queryselector должен анализировать только текущий экземпляр компонента.

Vue.component('somecomponent', {
    template: '#somecomponent',
    props: [...],

   ...

    created: function() {
        somevariablehere.querySelector('input').focus();
    }
});

спасибо заранее

4   51   2016-05-08 23:07:43

4 ответа:

вы можете получить доступ к дочерним элементам компонента vuejs с помощью this.$children. если вы хотите использовать селектор запросов для текущего экземпляра компонента, то this.$el.querySelector(...)

просто делаю простой console.log(this) покажет вам все свойства экземпляра компонента vue.

кроме того, если вы знаете элемент, который вы хотите получить доступ в вашем компоненте, вы можете добавить v-el:uniquename директива к нему и доступ к нему через this.$els.uniquename

в vuejs 2 v-el: el: uniquename был заменен на ref= " uniqueName". Затем доступ к элементу осуществляется через этого.$refs.uniqueName.

на Vue2 имейте в виду, что вы можете получить доступ этого.$refs.uniqueName только после установки компонента.

ответы не дают понять:

использовать this.$refs.someName, но, чтобы использовать его, вы должны добавить ref="someName" в Родительском.

см. демо ниже.

new Vue({
  el: '#app',
  mounted: function() {
    var childSpanClassAttr = this.$refs.someName.getAttribute('class');
    
    console.log('<span> was declared with "class" attr -->', childSpanClassAttr);
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<div id="app">
  Parent.
  <span ref="someName" class="abc jkl xyz">Child Span</span>
</div>

$refs и v-for

обратите внимание, что при использовании совместно с v-for на this.$refs.someName будет массив:

new Vue({
  el: '#app',
  data: {
    ages: [11, 22, 33]
  },
  mounted: function() {
    console.log("<span> one's text....:", this.$refs.mySpan[0].innerText);
    console.log("<span> two's text....:", this.$refs.mySpan[1].innerText);
    console.log("<span> three's text..:", this.$refs.mySpan[2].innerText);
  }
})
span { display: inline-block; border: 1px solid red; }
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<div id="app">
  Parent.
  <div v-for="age in ages">
    <span ref="mySpan">Age is {{ age }}</span>
  </div>
</div>