উপাদানটির মধ্যে একটি উপাদান পাচ্ছে ভ্যুজেজ

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

— ود

Answer 2

vuejs 2

v-el:el:uniquenameদ্বারা প্রতিস্থাপিত হয়েছে ref="uniqueName"। এরপরে উপাদানটি অ্যাক্সেস করা হয় this.$refs.uniqueName।

Comments

এটি আমাকে বুঝতে সাহায্য করেছিল যে refবৈশিষ্ট্যটি কোনও HTML উপাদান বা ভ্যুই উপাদানটিতে কাজ করে। ভাল জিনিস.

— সি বেস

দেখে মনে হচ্ছে এটি like refs.uniqueName একটি অ্যারে, সুতরাং আপনার এটি করা দরকার the রেফারস উপাদানটি পেতে রেফার্স.উনিক নাম [0]।

— নিকোলাস এস এক্সু

কেবল মাউন্টিং উপাদানগুলির পরে, যা পিতামাতার মাউন্ট পদ্ধতিতে করা যেতে পারে: मध्यम.com

— @

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

এছাড়াও উল্লেখ করা গুরুত্বপূর্ণ যে রেফড আইটেমগুলি প্রতিক্রিয়াশীল নয়।

— পিথিকোস

Answer 4

ইন Vue2 সচেতন আপনি অ্যাক্সেস করতে পারেন যে হতে এই। $ Refs.uniqueName শুধুমাত্র উপাদান মাউন্ট পরে।

Comments

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

— কোরিয়াস

Answer 5

মান 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

রচনা API

টেমপ্লেট রেফারস বিভাগটি কীভাবে এটি একীভূত হয়েছে তা বলে:

• টেম্পলেট মধ্যে, ব্যবহার ref="myEl"; :ref=সঙ্গে একটিv-for
• স্ক্রিপ্ট মধ্যে, একটি আছে const myEl = ref(null)এবং এটি থেকে প্রকাশsetup

রেফারেন্সটি মাউন্টের উপরের দিকে থেকে ডিওএম উপাদান বহন করে।