VueJs ottenere un elemento all'interno di un componente

Question

Ho un componente, come posso selezionare uno dei suoi elementi?

sto cercando di ottenere un input all'interno del modello di questo componente.

Potrebbero esserci più componenti in modo che il queryselector debba solo analizzare l'istanza corrente del componente.

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

    ... 

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

Grazie in anticipo

Answer 1

è possibile accedere i figli di un componente vuejs con this.$children. se si desidera utilizzare il selettore di query sull'istanza del componente corrente, allora this.$el.querySelector(...)

semplicemente facendo un semplice console.log(this) mostrerà tutte le proprietà di un'istanza del componente vue.

inoltre se si conosce l'elemento che si desidera accedere nel componente, è possibile aggiungere la direttiva v-el:uniquename ad esso e accedervi tramite this.$els.uniquename

Answer 2

In vuejs 2 v-el: el: UniqueName è stato sostituito di ref = "uniqueName". L'elemento è quindi accessibile tramite . $ Refs.uniqueName.

Answer 3

In vue2 essere consapevoli che è possibile accedere a questo . $ Refs.uniqueName solo dopo il montaggio del componente.

Answer 4

Le risposte non stanno rendendo chiaro:

Usa this.$refs.someName, ma, al fine di utilizzarlo, è necessario aggiungere ref="someName" nel genitore.

Vedere la demo di seguito.

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/vue@2.5.13/dist/vue.min.js"></script> 
 

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

$refs e v-for

noti che se usato in combinazione con v-for, il this.$refs.someName sarà un array:

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/vue@2.5.13/dist/vue.min.js"></script> 
 

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