Vue.js: प्रत्येक घटक उदाहरण के लिए एक अद्वितीय आईडी कैसे सेट करें?

Question

मैं एक घटक और एक इनपुट युक्त Vue.js के साथ एक घटक बनाना चाहता हूँ। उदाहरण के लिए:

<label for="inputId">Label text</label> 
<input id="inputId" type="text" /> 

मैं कैसे प्रत्येक घटक उदाहरण के लिए एक अद्वितीय ID सेट कर सकते हैं?

धन्यवाद।

Answer 1

प्रत्येक घटक में एक अद्वितीय आईडी है जिसे this._uid के रूप में उपयोग किया जा सकता है।

<template> 
    <div> 
    <label :for="id">Label text for {{id}}</label> 
    <input :id="id" type="text" /> 
    </div> 
</template> 

<script> 
export default { 
    data() { 
    return { 
     id: null 
    } 
    }, 
    mounted() { 
    this.id = this._uid 
    } 
} 
</script> 

यदि आप उन उदाहरणों पर अधिक नियंत्रण चाहते हैं जो आप उदाहरण के लिए कर सकते हैं, उन्हें मूल घटक के अंदर उत्पन्न करें।

Answer 2

यह इस पैटर्न (वू 2.0 वी-बाइंड) का उपयोग करके भी हासिल किया जा सकता है, इसलिए मान लें कि आपके पास आइटम्स की एक सूची है और आप कुछ डोम तत्व अनिनक आईडी देना चाहते हैं।

new Vue({ 

    el:body, 
    data: { 
    myElementIds : [1,2,3,4,5,6,8] 
    } 
}) 

एचटीएमएल

<div v-for="id in myElementIds"> 
    <label v-bind:for="id">Label text for {{id}}</label> 
    <input v-bind:id="id" type="text" /> 
<div> 

आशा है कि यह मदद करता है

Answer 3

Vue2 में, उपयोग v-बाँध।

हालांकि zxzak का जवाब बहुत अच्छा है मैं एक सर्वेक्षण

<div class="options" v-for="option in poll.body.options"> 
    <div class="poll-item"> 
     <label v-bind:for="option._id" v-bind:style="{color: option.color}">{{option.text}}</label> 
     <input type="radio" v-model="picked" v-bind:value="option._id" v-bind:id="option._id"> 
    </div> 
    </div> 

Answer 4

के लिए एक वस्तु है कहो; _uid एक प्रकाशित एपीआई संपत्ति नहीं है। भविष्य में बदलाव होने पर सिरदर्द को बचाने के लिए, आप नीचे दिए गए प्लगइन समाधान के साथ केवल एक ही परिवर्तन के साथ अपना कोड अपडेट कर सकते हैं।

Vue.use({ 
    install: function(Vue, options) { 
     Object.defineProperty(Vue.prototype, "uniqId", { 
      get: function uniqId() { 
       return this._uid; 
      } 
     }); 
    } 
});