Vue.js: প্রতিটি উপাদান উদাহরণের জন্য কীভাবে একটি অনন্য আইডি সেট করবেন?

Question

আমি Vue.js দিয়ে একটি লেবেল এবং একটি ইনপুটযুক্ত একটি উপাদান তৈরি করতে চাই। উদাহরণ স্বরূপ :

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

প্রতিটি উপাদান উদাহরণের জন্য আমি কীভাবে একটি অনন্য আইডি সেট করতে পারি?

ধন্যবাদ.

Comments

এখানে বেশ কয়েকটি প্যাকেজ / মিক্সিন রয়েছে যা আপনি দেখতে পারেন: ভ্যু-ইউসিড , ভিউ-উপাদান-আইডি , ভ্যু-ইউনিক -আইডি ।

— Str

পূর্ববর্তী মন্তব্যটি আগে না দেখে, আমি এনপিএম-এ এর জন্য ভ্যু-ইউনিক-আইডি ভ্যু প্লাগইনও প্রকাশ করেছি ।

— বার্নি

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>

উদাহরণস্বরূপ, আপনি এই আইডিগুলির উপর আরও নিয়ন্ত্রণ রাখতে চান তবে সেগুলি পিতামাতার উপাদানগুলির মধ্যে তৈরি করুন।

Comments

নোট করুন যে readyপদ্ধতিটি ভ্যু.০.০ এবং তার থেকেও উপরে সরানো হয়েছিল। যখন readyপদ্ধতিটি কার্যকর করা হচ্ছিল না তখন আমি খুব বিভ্রান্ত হয়ে পড়েছিলাম । stackoverflow.com/a/40209796/126751

— ব্রেন্ডন উড

... এবং dataঅবশ্যই এমন একটি ফাংশন হতে হবে যা কোনও অবজেক্টকে ফেরত দেয়: vuejs.org/v2/guide/compferences.html#data-

— মাস্ট-

দুর্ভাগ্যক্রমে, এটি টাইপস্ক্রিপ্টে কাজ করে না, যেমনটি this._uidবৈধ নয়। পরিবর্তে, নিজের আইডি নিজেই তৈরি করুন, উদাহরণস্বরূপ public id = uuid4();, uuid4 দেখুন ।

— এরিক ভুলিংস

যখন আমি মাউন্ট করা () পদ্ধতিটি থেকে অ্যাক্সেস করার চেষ্টা করেছি তখন ডিওএম-তে আইডি সেট করা হয়েছিল তা নিশ্চিত করার জন্য আমাকে প্রারম্ভকালীন () পদ্ধতিতে প্রবর্তন করতে হয়েছিল।

— স্টাফেন গারবার

ব্যবহার করবেন না _uid, এটি " অভ্যন্তরীণ ব্যবহারের জন্য সংরক্ষিত এবং এটি ব্যক্তিগত রাখা (এবং ব্যবহারকারীর কোডে এটির উপর নির্ভর না করা) জরুরি যাতে আমরা ভবিষ্যতের সম্ভাব্য ব্যবহারের ক্ষেত্রে এর আচরণ পরিবর্তন করতে নমনীয়তা বজায় রাখি "।

— str

Answer 2

নিহাতের বক্তব্যটির (উপরে): ইভান আপনি _উইড ব্যবহারের বিরুদ্ধে পরামর্শ দিয়েছেন: "ভিএম _ইউইড অভ্যন্তরীণ ব্যবহারের জন্য সংরক্ষিত এবং এটি ব্যক্তিগত রাখা (এবং ব্যবহারকারীর কোডে এটির উপর নির্ভর না করা) জরুরি যাতে আমরা এর পরিবর্তন করার জন্য নমনীয়তা বজায় রাখতে পারি সম্ভাব্য ভবিষ্যতের ব্যবহারের ক্ষেত্রে আচরণের জন্য ... ... আমি নিজেই ইউআইডি তৈরির পরামর্শ দেব [মডিউল, একটি গ্লোবাল মিক্সিন ইত্যাদি ব্যবহার করে] "

ইউআইডি উত্পন্ন করতে এই গিটহাব ইস্যুতে প্রস্তাবিত মিক্সিন ব্যবহার করা আরও ভাল পদ্ধতির মতো বলে মনে হচ্ছে:

let uuid = 0;

export default {
  beforeCreate() {
    this.uuid = uuid.toString();
    uuid += 1;
  },
};

Comments

প্রাসঙ্গিক গিটহাব ইস্যুটির একটি লিঙ্ক এখানে খুব কার্যকর হবে

— ড্যামন

এখানে গীটহাব ইস্যু রয়েছে যেখানে ইভান _আইডি ব্যবহারের বিরুদ্ধে পরামর্শ দেয়: github.com/vuejs/vue/issues/5886#issuecomment-30868625735

— জান্নে

Answer 3

আপডেট: কোড ._uidউদাহরণস্বরূপ সম্পত্তি উপস্থিত না থাকলে কোড একটি ত্রুটি ছুঁড়ে দেবে যাতে ভ্যু দ্বারা সরবরাহ করা যদি আপনি কাস্টম বা নতুন অনন্য আইডি সম্পত্তি ব্যবহার করতে কিছু আপডেট করতে পারেন।

যদিও জেডজাকের উত্তর দুর্দান্ত; _uidকোনও প্রকাশিত এপিআই সম্পত্তি নয়। ভবিষ্যতে কোনও মাথাব্যথা পরিবর্তনের ক্ষেত্রে এটি সংরক্ষণ করতে, আপনি নীচের মত একটি প্লাগইন সমাধান দিয়ে কেবল একটি পরিবর্তন করে আপনার কোডটি আপডেট করতে পারেন।

Vue.use({
    install: function(Vue, options) {
        Object.defineProperty(Vue.prototype, "uniqId", {
            get: function uniqId() {
                if ('_uid' in this) {
                   return this._uid;
                }
                throw new Error("_uid property does not exist");
            }
        });
    }
});

Comments

এটি এখনও ইউআইডি ব্যবহার করছে যা আপনার নিজের উত্তরে স্বীকার করে যে এর বিরুদ্ধে পরামর্শ দেওয়া হচ্ছে। খারাপ অনুশীলনের পক্ষে দয়া করে উত্তর পোস্ট করবেন না। এই উত্তরটি সরানো উচিত।

— হাইব্রিড ওয়েব ডেভ

হ্যাঁ তবে প্রকাশিত এপিআই পরিবর্তন / অপসারণের ক্ষেত্রে তাদের পুরো কোডটিতে কেবল একটি স্থান পরিবর্তন করতে হবে। অন্য উত্তরে, এটি প্রতি উপাদান ছিল। আমি ইতিমধ্যে শিরোনাম জোর।

— নিহাত

এছাড়াও, আমি সবেমাত্র কোডটি আপডেট করেছি যাতে _uidসম্পত্তির অস্তিত্ব না থাকলে এটি ত্রুটি ছুঁড়ে দেবে ।

— নিহাত

Answer 4

হালনাগাদ

আমি এনপিএম এ ভ্যু-ইউনিক-আইডি ভ্যু প্লাগইন প্রকাশ করেছি ।

উত্তর

অন্য কোনও সমাধান আপনার উপাদানগুলিতে একাধিক ফর্ম উপাদান থাকার প্রয়োজনীয়তা বিবেচনা করে না। পূর্বে প্রদত্ত উত্তরের উপর ভিত্তি করে এমন একটি প্লাগইন গ্রহণ করলাম:

Vue.use((Vue) => {
  // Assign a unique id to each component
  let uuid = 0;
  Vue.mixin({
    beforeCreate: function() {
      this.uuid = uuid.toString();
      uuid += 1;
    },
  });

  // Generate a component-scoped id
  Vue.prototype.$id = function(id) {
    return "uid-" + this.uuid + "-" + id;
  };
});

এটি অভ্যন্তরীণ _uidসম্পত্তির উপর নির্ভর করে না যা অভ্যন্তরীণ ব্যবহারের জন্য সংরক্ষিত ।

এটি আপনার উপাদানগুলিতে এটির মতো ব্যবহার করুন:

<label :for="$id('field1')">Field 1</label>
<input :id="$id('field1')" type="text" />

<label :for="$id('field2')">Field 2</label>
<input :id="$id('field2')" type="text" />

এরকম কিছু উত্পাদন করতে:

<label for="uid-42-field1">Field 1</label>
<input id="uid-42-field1" type="text" />

<label for="uid-42-field2">Field 2</label>
<input id="uid-42-field2" type="text" />

Answer 5

npm i -S lodash.uniqueid

তারপরে আপনার কোডে ...

<script>
  const uniqueId = require('lodash.uniqueid')

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

এইভাবে আপনি পুরো লোড্যাশ লাইব্রেরি লোড করছেন না, বা এমনকি পুরো লাইব্রেরি এতে সংরক্ষণ করছেন না node_modules।

Answer 6

Vue2 এ, ভি-বাইন্ড ব্যবহার করুন।

বলুন আমার কাছে একটি জরিপের জন্য একটি বিষয় আছে

  <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>

Comments

আপনার যা করা উচিত তা হ'ল v-for="(option, index) in poll.body.options"এবং indexআপনার মধ্যে ভি-বাইন্ড ব্যবহার করুন।

— ওয়ারে বুয়েস

Answer 7

একটি সহজ পদ্ধতির যা আমি জবাবগুলিতে দেখিনি is

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

<script>
import uniqueId from 'lodash-es/uniqueId'

export default {
  computed: {
    id () {
      # return this._uid
      return uniqueId('id')
    }
  }
}
</script>

Comments

ভিউ.জেএস এর নির্মাতা বলেছেন আপনার _uid ব্যবহার এড়ানো উচিত কারণ এটি অভ্যন্তরীণ ব্যবহারের জন্য এবং কোনও দিন তারা এটিকে সরিয়ে ফেলতে বা নাম পরিবর্তন করতে বা এর আচরণ পরিবর্তন করতে পারে।

— ওমিদ সাদেঘি

ধন্যবাদ, আমি মনে করি এটি সঠিক is আমি একটি ভিন্ন সমাধান সহ কোডটি আপডেট করেছি, আশা করি এখনও যথেষ্ট সহজ। যাইহোক, এই উদাহরণটির ধারণাটি ছিল একটি গণিত সম্পত্তি ব্যবহার করা।

— ক্রিস্টি দ্রাচিচি

লোডাশ থেকে অনন্য আইড হ'ল আমার মতে সেরা পন্থা

— জর্জিও টেম্পেস্তা

Answer 8

আপনি যদি কোনও প্লাগইন ছাড়াই টাইপস্ক্রিপ্ট ব্যবহার করছেন তবে আপনি কেবল নিজের শ্রেণীর উপাদানটিতে একটি স্ট্যাটিক আইডি যুক্ত করতে এবং তৈরি () পদ্ধতিতে এটি বাড়িয়ে দিতে পারেন। প্রতিটি উপাদানটির একটি অনন্য আইডি থাকবে (একই টিপ ব্যবহারকারী অন্য উপাদানগুলির সাথে সংঘর্ষ এড়াতে একটি স্ট্রিং উপসর্গ যুক্ত করুন)

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

<script lang="ts">
  ...
  @Component
  export default class MyComponent extends Vue {
    private id!: string;
    private static componentId = 0;
    ...
    created() {
      MyComponent.componentId += 1;
      this.id = `my-component-${MyComponent.componentId}`;
    }
 </script>

Answer 9

আপনার ডিওমে একাধিক উপাদান জুড়ে অ-স্বতন্ত্র আইডি থাকার অন্তর্নিহিত সমস্যাটির জন্য এই প্যাকেজটি ভাল সমাধান বলে মনে হচ্ছে:

Vue-uniq-আইডিগুলি

এটি উপাদান ব্যবহার করার একটি প্রবণতা। উপাদানগুলি শীতল, তারা ছোট, সুস্পষ্ট, সহজেই ব্যবহারযোগ্য এবং মডুলার। অবিরত এটি আইডি সম্পত্তি আসে।

কিছু HTML ট্যাগ বৈশিষ্ট্যগুলির জন্য একটি আইডি সম্পত্তি ব্যবহার করা দরকার যেমন লেবেল [for], ইনপুট [ফর্ম] এবং অনেকগুলি আরিয়া- * বৈশিষ্ট্যগুলি * আর আইডি নিয়ে সমস্যা হ'ল এটি মডুলার নয়। পৃষ্ঠায় বেশ কয়েকটি আইডি বৈশিষ্ট্যের যদি একই মান থাকে তবে তারা একে অপরকে প্রভাবিত করতে পারে।

VueUniqIds আপনাকে এই সমস্যা থেকে মুক্তি পেতে সহায়তা করে। এটি আইডি-সম্পর্কিত নির্দেশের সেট সরবরাহ করে যা মানটি পড়তে সহজ করে রাখার সময় স্বতন্ত্র স্ট্রিং যুক্ত করে স্বয়ংক্রিয়ভাবে সংশোধিত হয়।

Answer 10

আপনার ইউআইডি যদি অন্য কম্পোমেন্ট ব্যবহার না করে তবে আমার একটি ধারণা আছে।

uid: Math.random()

সহজ এবং যথেষ্ট।

Comments

যখন আইডি সংঘর্ষের আসল সুযোগ রয়েছে তখন এই পদ্ধতির ন্যায্যতা প্রমাণ করা কঠিন ...

— শেডো

Answer 11

এটি এই প্যাটার্নটি ব্যবহার করেও অর্জন করা যেতে পারে (ভ্যু ২.০ ভি ভি-বাইন্ড), সুতরাং বলে নেওয়া যাক আপনার পুনরাবৃত্তি করার জন্য আইটেমগুলির একটি তালিকা রয়েছে এবং আপনি কিছু ডোম উপাদান আননক আইডি দিতে চান।

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> 

আশা করি এটা সাহায্য করবে

Comments

আপনি অ্যারেতে কেবল আইডিটি সংজ্ঞায়িত করছেন। আসল প্রশ্নটি মোটেও সমাধান করে না।

— আর্মিনরোসু