جلسه نهم: ارسال اطلاعات به فرم‌ها توسط Vue.js

در جلسه گذشته (هشتم) به بررسی دقیق رویدادها و چگونگی کنترل آنها پرداختیم و در انتها روش انتقال رویدادها با استفاده از صفحه کلید را مورد بررسی قرار دادیم. حال در این جلسه قصد داریم به شما عزیزان آموزش دقیق و پایه‌ی ارتباط بین فرم‌های ورودی و ارسال-اتصال داده‌ها، ارائه دهیم. با ما همراه باشید.

کاربرد عمومی

شما با استفاده از دستور v-model می‌توانید به ایجاد دو راه ارتباطی ارسال داده در بستر المان‌های input و حتی textarea بپردازید. دستور v-model به صورت خودکار، صحیح‌ترین راه را برای بروزرسانی المان‌ها بر اساس نوع آنها، انتخاب می‌کند. توجه داشته باشید که دستور v-model تحت هیچ شرایطی به مقادیر اولیه ورودی‌ها و یا textarea ها توجه نمی‌کند. بلکه با نمونه‌ی داده‌ای Vue همواره به صورت یک شیء برخورد می‌کند.

متن (Text)

نمایش یک متن ورودی توسط دستور v-model را با استفاده از یک مثال شرح می‌دهیم.

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

جهت نمایش خروجی کد بالا روی اینجا کلیک کنید.

متن چندخطی (Multiline Text)

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

جهت نمایش خروجی کد بالا روی اینجا کلیک کنید.

چک باکس‌ (Checkbox)

برای نمایش یک چک باکس تنها که دارای عبارت درست و نادرست است می‌توان از دستور زیر استفاده کرد:

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

جهت نمایش خروجی کد بالا روی اینجا کلیک کنید.

برای نمایش چندین چک باکس در کنار یکدیگر می‌توان از محدوده‌ی آرایه‌های مشابه استفاده کرد:

<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>
<br>
<span>Checked names: {{ checkedNames }}</span>


new Vue({
	el: '...',
	data: {
		checkedNames: []
	}
})

جهت نمایش خروجی کد بالا روی اینجا کلیک کنید.

دکمه‌های رادیویی (Radio Button)

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>

جهت نمایش خروجی کد بالا روی اینجا کلیک کنید.

انتخابی (Select)

انتخاب تکی از لیست، برای دقیق تر شدن روی این نوع در فرم‌ها به مثال زیر توجه کنید:

<select v-model="selected">
	<option>A</option>
	<option>B</option>
	<option>C</option>
</select>
<span>Selected: {{ selected }} </span>

جهت نمایش خروجی کد بالا روی اینجا کلیک کنید.

انتخاب چندگانه محدود به آرایه (Multiple Select)

<select v-model="selected" multiple>
	<option>A</option>
	<option>B</option>
	<option>C</option>
</select>
<span>Selected: {{ selected }} </span>

جهت نمایش خروجی کد بالا روی اینجا کلیک کنید.

همچنین می‌توان گزینه‌های پویا برای رندر کردن قرار داد که با استفاده از v-for امکان پذیر خواهد بود. مثال زیر را با هم بررسی می‌کنیم:

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

new Vue({
	el: "...",
	data:{
		selected: 'A',
		options: [
			{ text: 'One', value: 'A' },
			{ text: 'Two', value: 'B' },
			{ text: 'Three', value: 'C' }
		]
	}
})

جهت نمایش خروجی کد بالا روی اینجا کلیک کنید.

اتصال داده‌ها

برای دکمه‌های رادیویی، چک باکس‌ها و گزینه‌های انتخابی، مقدار ارسالی v-model همواره یک رشته ثابت است (یا یک مقدار بولین - Boolean). به مثال زیر توجه کنید:

// "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 selected
<select v-model="selected">
	<option value="abc">ABC</option>
</select>

برخی مواقع نیاز داریم یک مقدار خاص را به یک ویژگی پویا اتصال بدهیم. در این حالت می‌توان از دستور v-bind درون المان‌ها استفاده کرد. به‌علاوه دستور v-bind به شما اجازه می‌دهد که مقدار ورودی را به یک مقدار غیررشته‌ای الحاق کنید.

v-bind در چک باکس

کد زیر نمونه‌ای از ارائه دستور v-bind درون حالت ورودی checkbox است:

<input
	type="checkbox"
	v-model="toggle"
	v-bind:true-value="a"
	v-bind:false-value="b"
>

//هنگام تیک خوردن
vm.toggle === vm.a

//هنگام تیک نخوردن
vm.toggle === vm.b

v-bind در دکمه‌های رادیویی

<input type="radio" v-model="pick" v-bind:value="a">

//هنگام تیک خوردن
vm.pick === vm.a

v-bind در گزینه‌های انتخابی

<select v-model="selected">
	<option v-bind:value="{ number: 123 }">123</option>
</select>

// هنگام انتخاب کردن یک آیتم
typeof vm.selected // -> 'object'
vm.select.number // -> 123

مودیفایرها

مودیفایر lazy: به صورت پیش‌فرض، v-model داده‌های ورودی و داد‌ه‌هایی که پس از هر رویداد ورودی ایجاد می‌شوند را همگام‌سازی یا sync می‌کند. شما می‌توانید مودیفایر lazy را به جای همگام‌سازی در v-model اضافه کنید. تا پس از هر رویداد change، مودیفایر lazy اعمال شود. به مثال زیر توجه کنید:

<input v-model.lazy="message">

مودیفایر number: اگر شما می‌خواهید یک کاربر داده‌ی عددی را وارد کند می‌توانید از مودیفایر number را اعمال کنید:

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

مودیفایر trim: اگر شما نیاز دارید که اطلاعات وارد شده توسط کاربر به صورت خودکار اصلاح شود، می‌توانید از مودیفایر trim استفاده کنید:

<input v-model.trim="message">

جامع ترین دوره آموزشی Vue.js 2.0 در ایران را می توانید از طریق اینجا مشاهده کنید.