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

Question

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

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

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

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

Vue.component('somecomponent', {

    template: '#somecomponent',

    props: [...],



   ...



    created: function() {

        somevariablehere.querySelector('input').focus();

    }

});

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

1973 4

vue.js

4 ответов:

Comments

Ничего не найдено.

vbranden · Accepted Answer · 2016-05-11 23:03:29

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

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

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

tariqdaouda · Accepted Answer · 2017-03-05 10:32:56

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

Dominik Dosoudil · Accepted Answer · 2017-07-18 17:24:31

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

acdcjunior · Accepted Answer · 2018-03-05 02:51:24

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

использовать 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>

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

4 ответов:

$refs и v-for

Comments

`$refs` и `v-for`