اتصال داده به ورودی فرم (Form Input Bindings)

اصول آموزش vuejs

تاریخ : جمعه 19 مهر 1398

اتصال داده به ورودی فرم (Form Input Bindings)

شما می توانید از دایرکتیوv-model برای ایجاد اتصالات داده دو طرفه در ورودی فرم ، textarea و عناصر انتخاب استفاده کنید. این به طور خودکار روش صحیح برای به روز رسانی عنصر را بر اساس نوع ورودی انتخاب می کند.

v-model مقدار اولیه ، صفات بررسی شده یا منتخب موجود در هر عنصر فرم را نادیده نمی گیرد. همیشه با داده های نمونه Vue به عنوان منبع درست رفتار خواهد کرد. شما باید مقدار اولیه را در قسمت JavaScript ، در داخل گزینه data (کامپوننت) خود اعلام کنید.

v-model در داخل از خواص مختلفی استفاده می کند و رویدادهای مختلفی را برای عناصر ورودی مختلف منتشر می کند:

  • text و عناصر textarea از ویژگی value و رویداد ورودی استفاده می کنند.
  • checkboxes و radiobuttons از ویژگیهای checked استفاده کرده و رویداد را تغییر می دهند.
  • فیلدهای انتخابی value را به عنوان پایه استفاده کرده و به عنوان یک رویداد تغییر می دهند.


Text

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
var vm = new Vue({
        el: 'app',
        data:{
            message: ''
        }
    })

Message is: {{ message }}


Multiline text

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

{{ message }}


درج در textareas بصورت (<textarea>{{text}}</textarea>) کار نمی کند. از v-model استفاده نمایید.


Checkbox

Checkbox تکی، مقدار boolean :

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

checkboxes چک چندگانه ، محدود به همان آرایه:

<div id='example-3'>
  <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>
</div>
new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

Checked names: {{ checkedNames }}


Radio

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


Picked: {{ picked }}


Select

انتخاب تکی:

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
  el: '...',
  data: {
    selected: ''
  }
})
Selected: {{ selected }}
اگر مقدار اولیه از v-model شما با هیچ یک از گزینه ها مطابقت نداشته باشد ، عنصر <select> در حالت "انتخاب نشده" ارائه می شود. در iOS این باعث می شود کاربر نتواند اولین مورد را انتخاب کند. بنابراین توصیه می شود همانطور که در مثال بالا نشان داده شده است گزینه غیرفعال با مقدار خالی تهیه کنید.

انتخاب چندگانه:

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

گزینه های پویا ارائه شده با 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' }
    ]
  }
})
Selected: {{ selected }}


اتصال مقدار (Value Bindings)

برای radio, checkbox and select options ، مقادیر اتصال v-model معمولاً رشته های استاتیک (یا booleans برای checkbox) است:

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

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


Checkbox

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>
// when checked:
vm.toggle === 'yes'
// when unchecked:
vm.toggle === 'no'
ویژگی های true-value و false-value روی ویژگی value ورودی تأثیر نمی گذارند ، زیرا مرورگرها چک باکس های چک نشده را ارسال نمی کنند.


Radio

<input type="radio" v-model="pick" v-bind:value="a">
// when checked:
vm.pick === vm.a


Select Options

<select v-model="selected">
  <!-- inline object literal -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>
// when selected:
typeof vm.selected // => 'object'
vm.selected.number // => 123


اصلاح کننده ها (Modifiers)

.lazy

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

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


.number

اگر می خواهید ورودی کاربر به صورت خودکار بصورت عددی تایپ شود ، می توانید اصلاح کننده شماره را به ورودی های مدیریت شده v-model خود اضافه کنید:

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

این اغلب مفید است ، زیرا حتی با type="number" مقدار عناصر ورودی HTML همیشه یک رشته را برمی گرداند. اگر مقدار با ()parseFloat تجزیه نشود ، مقدار اصلی برمی گردد.


.trim

اگر می خواهید کاراکتر فضای خالی از ورودی کاربر به صورت خودکار حذف شود ، می توانید اصلاح کننده trim را به ورودی های با مدیریت v-model خود اضافه کنید:

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

منابع مورد مطالعه جهت جمع آوری این مطلب:
https://vuejs.org/v2/guide/forms.html


نظرات