Skip to content

Form Input Bindings

ফ্রন্টএন্ডে ফর্মগুলি নিয়ে কাজ করার সময়, আমাদের প্রায়শই জাভাস্ক্রিপ্টে সংশ্লিষ্ট অবস্থার সাথে ফর্ম ইনপুট কম্পোনেন্টগুলির অবস্থা সিঙ্ক করতে হবে। ম্যানুয়ালি ভ্যালু বাইন্ডিং ওয়্যার আপ করা এবং ইভেন্ট শ্রোতাদের পরিবর্তন করা কষ্টকর হতে পারে:

template
<input
  :value="text"
  @input="event => text = event.target.value">

v-model নির্দেশ আমাদের উপরোক্ত বিষয়গুলিকে সহজ করতে সাহায্য করে:

template
<input v-model="text">

এছাড়াও, v-model বিভিন্ন ধরনের ইনপুট, <textarea>, এবং <select> কম্পোনেন্টে ব্যবহার করা যেতে পারে। এটি স্বয়ংক্রিয়ভাবে বিভিন্ন DOM কম্পিউটেড প্রপার্টি এবং ইভেন্ট জোড়ায় প্রসারিত হয় যে কম্পোনেন্টটির উপর এটি ব্যবহৃত হয়:

  • <input> টেক্সট প্রকার এবং <textarea> উপাদানগুলি value বৈশিষ্ট্য এবং input ইভেন্ট ব্যবহার করে;
  • <input type="checkbox"> এবং <input type="radio"> চেকড বৈশিষ্ট্য এবং পরিবর্তন ইভেন্ট ব্যবহার করুন;
  • <select> একটি প্রপ হিসাবে মান এবং একটি ইভেন্ট হিসাবে পরিবর্তন ব্যবহার করে।

Note

v-model যেকোনো ফর্ম কম্পোনেন্টে পাওয়া প্রাথমিক value, checked বা selected বৈশিষ্ট্যগুলিকে উপেক্ষা করবে। এটি সর্বদা বর্তমান আবদ্ধ জাভাস্ক্রিপ্ট অবস্থাকে সত্যের উৎস হিসাবে বিবেচনা করবে। আপনি জাভাস্ক্রিপ্ট পাশে প্রাথমিক মান ঘোষণা করা উচিত, ব্যবহার করেdata অপশনreactivity APIs.

Basic Usage

Text

template
<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />

Message is:

বিঃদ্রঃ

যে ভাষাগুলির জন্য IME (চীনা, জাপানি, কোরিয়ান ইত্যাদি) প্রয়োজন, আপনি লক্ষ্য করবেন যে IME চলাকালীন v-model আপডেট হয় না গঠন. আপনি যদি এই আপডেটগুলিতেও সাড়া দিতে চান, তাহলে v-মডেল ব্যবহার না করে আপনার নিজের ইনপুট ইভেন্ট লিসেনার এবং মান বাইন্ডিং ব্যবহার করুন।

Multiline text

template
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
Multiline message is:

মনে রাখবেন <textarea> এর ভিতরে ইন্টারপোলেশন কাজ করবে না। পরিবর্তে v-model ব্যবহার করুন।

template
<!-- bad -->
<textarea>{{ text }}</textarea>

<!-- good -->
<textarea v-model="text"></textarea>

Checkbox

সিঙ্গেল চেকবক্স, boolean মান:

template
<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>

আমরা একই অ্যারে বা Set মানতে একাধিক চেকবক্স আবদ্ধ করতে পারি:

js
const checkedNames = ref([])
js
export default {
  data() {
    return {
      checkedNames: []
    }
  }
}
template
<div>Checked names: {{ checkedNames }}</div>

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>

<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
Checked names: []

এই ক্ষেত্রে, checkedNames অ্যারেতে সর্বদা বর্তমানে চেক করা বাক্সের মান থাকবে।

Radio

template
<div>Picked: {{ picked }}</div>

<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>

<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>
Picked:

Select

একক select:

template
<div>Selected: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
Selected:

বিঃদ্রঃ

যদি আপনার v-model অভিব্যক্তির প্রাথমিক মান কোনো বিকল্পের সাথে মেলে না, তাহলে <select> কম্পোনেন্টটি একটি "অনির্বাচিত" অবস্থায় রেন্ডার হবে। আইওএস-এ এটি ব্যবহারকারীর প্রথম আইটেমটি নির্বাচন করতে সক্ষম হবে না কারণ iOS এই ক্ষেত্রে কোনও পরিবর্তন ইভেন্ট চালু করে না। সুতরাং উপরের উদাহরণে প্রদর্শিত হিসাবে, একটি খালি মান সহ একটি অক্ষম বিকল্প প্রদান করার সুপারিশ করা হয়।

একাধিক নির্বাচন (array সাথে আবদ্ধ):

template
<div>Selected: {{ selected }}</div>

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
Selected: []

নির্বাচনের বিকল্পগুলি গতিশীলভাবে v-for দিয়ে রেন্ডার করা যেতে পারে:

js
const selected = ref('A')

const options = ref([
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
])
js
export default {
  data() {
    return {
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    }
  }
}
template
<select v-model="selected">
  <option v-for="option in options" :value="option.value">
    {{ option.text }}
  </option>
</select>

<div>Selected: {{ selected }}</div>

Value Bindings

রেডিও, চেকবক্স এবং নির্বাচনের বিকল্পগুলির জন্য, v-model বাঁধাই মানগুলি সাধারণত স্ট্যাটিক স্ট্রিং (বা চেকবক্সের জন্য বুলিয়ান):

template
<!-- `picked` is a string "a" when checked -->
<input type="radio" v-model="picked" value="a" />

<!-- `toggle` is either true or false -->
<input type="checkbox" v-model="toggle" />

<!-- `selected` is a string "abc" when the first option is selected -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

কিন্তু কখনও কখনও আমরা বর্তমান সক্রিয় উদাহরণে একটি গতিশীল কম্পিউটেড প্রপার্টির সাথে মানটিকে আবদ্ধ করতে চাই। আমরা এটি অর্জন করতে v-bind ব্যবহার করতে পারি। উপরন্তু, v-bind ব্যবহার করে আমাদের ইনপুট মানকে নন-স্ট্রিং মানের সাথে আবদ্ধ করতে দেয়।

Checkbox

template
<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no" />

true-value এবং false-value হল Vue-নির্দিষ্ট বৈশিষ্ট্য যা শুধুমাত্র v-model এর সাথে কাজ করে। এখানে toggle প্রপার্টির মান বক্সে টিক চিহ্ন দিলে 'yes' তে সেট করা হবে এবং টিক চিহ্নমুক্ত করা হলে no'তে সেট করা হবে। আপনি এগুলিকে v-bind ব্যবহার করে গতিশীল মানগুলিতে আবদ্ধ করতে পারেন:

template
<input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

পরামর্শ

true-value এবং false-value বৈশিষ্ট্যগুলি ইনপুটের value বৈশিষ্ট্যকে প্রভাবিত করে না, কারণ ব্রাউজারগুলি ফর্ম জমা দেওয়ার ক্ষেত্রে অচেক করা বাক্সগুলিকে অন্তর্ভুক্ত করে না। দুটি মানের মধ্যে একটি ফর্মে জমা দেওয়া হয়েছে তা নিশ্চিত করতে (যেমন "হ্যাঁ" বা "না"), পরিবর্তে রেডিও ইনপুট ব্যবহার করুন।

Radio

template
<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />

প্রথম রেডিও ইনপুট চেক করা হলে pick first এর মান সেট করা হবে এবং দ্বিতীয়টি চেক করা হলে second এর মান সেট করা হবে।

Select Options

template
<select v-model="selected">
  <!-- inline object literal -->
  <option :value="{ number: 123 }">123</option>
</select>

v-model নন-স্ট্রিং মানের মান বাইন্ডিংকেও সমর্থন করে! উপরের উদাহরণে, বিকল্পটি নির্বাচন করা হলে, selected অবজেক্টের আক্ষরিক মান { number: 123 }-এ সেট করা হবে।

Modifiers

.lazy

ডিফল্টরূপে, v-model প্রতিটি input ইভেন্টের পরে ডেটার সাথে ইনপুটকে সিঙ্ক করে (IME কম্পোজিশন বাদে stated above)। আপনি change events পরে সিঙ্ক করার পরিবর্তে lazy সংশোধক যোগ করতে পারেন:

template
<!-- synced after "change" instead of "input" -->
<input v-model.lazy="msg" />

.number

আপনি যদি চান যে ব্যবহারকারীর ইনপুট স্বয়ংক্রিয়ভাবে একটি সংখ্যা হিসাবে টাইপকাস্ট হোক, আপনি আপনার v-model পরিচালিত ইনপুটগুলিতে number সংশোধক যোগ করতে পারেন:

template
<input v-model.number="age" />

যদি মানটিকে parseFloat() দিয়ে পার্স করা না যায়, তাহলে এর পরিবর্তে আসল মান ব্যবহার করা হয়।

যদি ইনপুটে type="number" থাকে তাহলে number সংশোধক স্বয়ংক্রিয়ভাবে প্রয়োগ করা হয়।

.trim

আপনি যদি ব্যবহারকারীর ইনপুট থেকে হোয়াইটস্পেস স্বয়ংক্রিয়ভাবে ছাঁটাই করতে চান, তাহলে আপনি আপনার v-model-পরিচালিত ইনপুটগুলিতে trim সংশোধক যোগ করতে পারেন:

template
<input v-model.trim="msg" />

v-model with Components

আপনি যদি এখনও Vue এর কম্পোনেন্টগুলির সাথে পরিচিত না হন তবে আপনি আপাতত এটি এড়িয়ে যেতে পারেন৷

HTML এর অন্তর্নির্মিত ইনপুট প্রকারগুলি সর্বদা আপনার চাহিদা পূরণ করবে না। ভাগ্যক্রমে, Vue কম্পোনেন্টগুলি আপনাকে সম্পূর্ণরূপে কাস্টমাইজড আচরণের সাথে পুনরায় ব্যবহারযোগ্য ইনপুট তৈরি করতে দেয়। এই ইনপুটগুলি এমনকি v-model এর সাথেও কাজ করে! আরও জানতে, কম্পোনেন্টস গাইডে v-model এর সাথে ব্যবহার সম্পর্কে পড়ুন।

Form Input Bindings has loaded