VueJs एक घटक के भीतर एक तत्व हो रही है

Question

मेरे पास एक घटक है, मैं इसके तत्वों में से एक का चयन कैसे कर सकता हूं?

मैं एक इनपुट प्राप्त करने की कोशिश कर रहा हूं जो इस घटक के टेम्पलेट के भीतर है।

कई घटक हो सकते हैं इसलिए क्वेरीसेक्टर को केवल घटक की वर्तमान आवृत्ति को पार्स करना होगा।

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

   ...

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

अग्रिम में धन्यवाद

Answer 1

आप के साथ एक vuejs घटक के बच्चों तक पहुँच सकते हैं this.$children। यदि आप वर्तमान घटक उदाहरण पर क्वेरी चयनकर्ता का उपयोग करना चाहते हैंthis.$el.querySelector(...)

बस एक सरल कार्य करने console.log(this)से आपको एक पु घटक घटक के सभी गुण दिखाई देंगे।

इसके अतिरिक्त यदि आप उस तत्व को जानते हैं जिसे आप अपने घटक में एक्सेस करना चाहते हैं, तो आप इसमें v-el:uniquenameनिर्देश जोड़ सकते हैं और इसके माध्यम से एक्सेस कर सकते हैंthis.$els.uniquename

Comments

संकेत: this.$elघुड़सवार तक अपरिभाषित है। यदि आप किसी वैरिएबल को इनिशियलाइज़ करना चाहते हैं तोmount()

— wedi

Answer 2

vuejs 2

v-el:el:uniquenameद्वारा प्रतिस्थापित किया गया है ref="uniqueName"। तत्व के माध्यम से तब पहुँचा जाता है this.$refs.uniqueName।

Comments

इससे मुझे एहसास हुआ कि refविशेषता किसी भी HTML तत्व या Vue घटक पर काम करती है। अच्छी चीज़।

— सी। बेस

यह इस तरह दिखता है। $ refs.uniqueName एक सरणी है, इसलिए आपको इस तत्व की आवश्यकता है। संदर्भित तत्व प्राप्त करने के लिए $ refs.uniqueName [0]।

— निकोलस S.Xu

बढ़ते घटक के बाद ही, जो माता-पिता की घुड़सवार विधि में किया जा सकता है: मध्यम.

— योर्डन जॉर्जिएव

Answer 3

उत्तर स्पष्ट नहीं कर रहे हैं:

उपयोग करें 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/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 तथा 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/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>

Comments

यह भी नोट करना महत्वपूर्ण है कि reffed आइटम प्रतिक्रियाशील नहीं हैं।

— पिथिकोस

Answer 4

Vue2 में ध्यान रखें कि आप इस तक पहुँच सकते हैं । घटक को माउंट करने के बाद ही $ Refs.uniqueName ।

Comments

Vue के जीवनचक्र में आरोहित होने से पहले की सब कुछ आपके ब्राउज़र में प्रस्तुत नहीं किया गया है। चूंकि यह अभी तक माउंट नहीं किया गया है, इसलिए कोई डोम उपलब्ध निरीक्षण नहीं है।

— कोरस

Answer 5

Vue 2.x

आधिकारिक जानकारी के लिए:

https://vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced

एक सरल उदाहरण:

किसी भी तत्व पर आपको refएक विशिष्ट मूल्य के साथ एक विशेषता जोड़ना होगा

<input ref="foo" type="text" >

उस एलिमेंट के उपयोग का लक्ष्य बनाना this.$refs.foo

this.$refs.foo.focus(); // it will focus the input having ref="foo"

Answer 6

रचना एपीआई

टेम्प्लेट रेफ़्स अनुभाग बताता है कि यह कैसे एकीकृत किया गया है:

• टेम्पलेट के भीतर, उपयोग ref="myEl"; :ref=के साथv-for
• स्क्रिप्ट के भीतर, एक है const myEl = ref(null)और इसे से बेनकाबsetup

संदर्भ डोम तत्व को बढ़ते हुए से आगे ले जाता है।