Vue $refs অবজেক্ট
$refs অবজেক্ট রেফ অ্যাট্রিবিউট দিয়ে চিহ্নিত DOM উপাদান সংরক্ষণ করে।
$refs অবজেক্টের ভিতরের উপাদানগুলি এই কীওয়ার্ড দিয়ে অ্যাক্সেস করা যেতে পারে।
আপনার নিজস্ব Vue সার্ভার পান
<p> ট্যাগের ভিতরে পাঠ্য পরিবর্তন করতে একটি পদ্ধতির ভিতরে $refs অবজেক্ট ব্যবহার করে।
Example
methods: {
changeVal() {
this.$refs.pEl.innerHTML = "Hello!";
}
}সংজ্ঞা এবং প্রয়োগ
বিল্ট-ইন রেফ অ্যাট্রিবিউট দিয়ে চিহ্নিত DOM উপাদানগুলি $refs অবজেক্টে সংরক্ষণ করা হয়।
$refs অবজেক্টের ভিতরের উপাদানগুলি এই কীওয়ার্ড দিয়ে অ্যাক্সেস করা যেতে পারে।
querySelector() এবং getElementById() প্লেইন জাভাস্ক্রিপ্টে যেভাবে ব্যবহার করা হয় তার অনুরূপ $refs অবজেক্টটি DOM উপাদানগুলি পড়তে বা সংশোধন করতে ব্যবহৃত হয়।
আরো উদাহরণ
Example 1
প্রথম <p> ট্যাগ থেকে টেক্সট দ্বিতীয় <p> ট্যাগে কপি করা হয়।
Template
<template>
<h1>Example</h1>
<p ref="p1">Click the button to copy this text into the paragraph below.</p>
<button @click="transferText">Transfer text</button>
<p ref="p2">...</p>
</template>Script
<script>
export default {
methods: {
transferText() {
this.$refs.p2.innerHTML = this.$refs.p1.innerHTML;
}
}
};
</script>Example 2
একটি <p> উপাদান ইনপুট ক্ষেত্রে লেখা হওয়ার সাথে সাথে বিষয়বস্তু গ্রহণ করে।
Template
<template>
<h1>Example</h1>
<p>Start writing inside the input element, and the text will be copied into the last paragraph by the use of the '$refs' object.</p>
<input ref="inputEl" @input="getRefs" placeholder="Write something..">
<p ref="pEl"></p>
</template>Script
<script>
export default {
methods: {
getRefs() {
this.$refs.pEl.innerHTML = this.$refs.inputEl.value;
}
}
};
</script>Example 3
বোতামটি $refs অবজেক্টের ভিতরে একটি অ্যারে উপাদান হিসাবে সংরক্ষিত তৃতীয় তালিকা উপাদানটিকে প্রকাশ করে।
Template
<template>
<h1>Example</h1>
<p>Click the button to reveal the 3rd list element stored as an array element in the $refs object.</p>
<button @click="getValue">Get the 3rd list element</button><br>
<ul>
<li v-for="x in liTexts" ref="liEl">{{ x }}</li>
</ul>
<pre>{{ thirdEl }}</pre>
</template>Script
<script>
export default {
data() {
return {
thirdEl: ' ',
liTexts: ['Apple','Banana','Kiwi','Tomato','Lichi']
}
},
methods: {
getValue() {
this.thirdEl = this.$refs.liEl[2].innerHTML;
console.log("this.$refs.liEl = ",this.$refs.liEl);
}
}
};
</script>