VueJs pobiera element w komponencie

Question

Mam komponent, w jaki sposób mogę wybrać jeden z jego elementów?

Próbuję uzyskać dane wejściowe znajdujące się w szablonie tego komponentu.

Może istnieć wiele komponentów, więc queryselector musi analizować tylko bieżące wystąpienie komponentu.

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

    ... 

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

góry dzięki

Answer 1

można uzyskać dostęp dzieci komponentu vuejs z this.$children. jeśli chcesz użyć selektora kwerendy w bieżącym wystąpieniu komponentu, to po prostu wykonanie prostego pokaże Ci wszystkie właściwości instancji komponentu vue.

dodatkowo jeśli wiesz element chcesz uzyskać dostęp do swojego urządzenia, można dodać dyrektywę v-el:uniquename do niego i do niego dostęp za pośrednictwem this.$els.uniquename

Answer 2

W vuejs 2 v-EL: el: UniqueName została zastąpiona przez ref = "uniqueName". Dostęp do elementu odbywa się przez . $ Refs.uniqueName.

Answer 3

W Vue2 mieć świadomość, że można uzyskać dostęp to. $ Refs.uniqueName dopiero po montażu elementu.

Answer 4

Odpowiedzi nie są jednoznaczne stwierdzenie:

Zastosowanie this.$refs.someName, ale aby ją wykorzystać, trzeba dodać ref="someName" w dominującej.

Zobacz prezentację poniżej.

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 i v-for

Należy zauważyć, że w połączeniu z v-for The this.$refs.someName będzie tablica:

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>