Form Input Bindings ​

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

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

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

<input v-model="text">

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

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

Basic Usage ​

Text ​

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

Multiline Text ​

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

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

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

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

Checkbox ​

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

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

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

const checkedNames = ref([])

export default {
  data() {
    return {
      checkedNames: []
    }
  }
}

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

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

Radio ​

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

Select ​

একক select:

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

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

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

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

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

const selected = ref('A')

const options = ref([
  { text: 'One', value: 'A' },
  { text: 'Two', value: 'B' },
  { text: 'Three', value: 'C' }
])

export default {
  data() {
    return {
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    }
  }
}

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

<select v-model="selected">
  <option v-for="option in options" :value="option.value">
    {{ option.text }}
  </option>
</select>

Value Bindings ​

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

<!-- `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 ​

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

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

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

Radio ​

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

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

Select Options ​

<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 সংশোধক যোগ করতে পারেন:

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

.number ​

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

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

যদি মানটিকে parseFloat() দিয়ে পার্স করা না যায়, তাহলে এর পরিবর্তে আসল (স্ট্রিং) মান ব্যবহার করা হয়। বিশেষ করে, যদি ইনপুট খালি থাকে (উদাহরণস্বরূপ ব্যবহারকারী ইনপুট ক্ষেত্রটি সাফ করার পরে), একটি খালি স্ট্রিং ফেরত দেওয়া হয়। এই আচরণটি DOM প্রপার্টি valueAsNumber থেকে আলাদা।

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

.trim ​

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

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

v-model with Components ​

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

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