v-model (v-model)

دستور v-model یعنی «اتصال دوطرفه (Two-way Binding)». یعنی ورودی عوض شود، داده هم عوض می شود؛ برعکسش هم درست است. پس فرم ها در Vue ساده تر و سریع تر می شوند.

اتصال دوطرفه ساده

یک ورودی متن بساز. مقدارش را با v-model به داده وصل کن.

<div id="app">
  <input type="text" v-model="inpText">
  <p>{{ inpText }}<\/p>
<\/div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
<script>
const app = Vue.createApp({
  data() {
    return {
      inpText: 'Initial text'
    };
  }
});
app.mount('#app');
<\/script>

مشاهده در ادیتور

نکته: می شود همین رفتار را با v-bind:value و v-on:input ساخت؛ اما v-model کوتاه تر و خواناتر است.

چک باکس پویا با v-model

می خواهیم «مهم بودن» را تیک بزنیم. متن کناری، وضعیت را لحظه ای نشان می دهد.

<div id="app">
  <form>
    <p>Important item?<\/p>
    <label>
      <input type="checkbox" v-model="important">
      {{ important }}
    <\/label>
  <\/form>
<\/div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
<script>
const app = Vue.createApp({
  data() {
    return {
      important: false
    };
  }
});
app.mount('#app');
<\/script>

مشاهده در ادیتور

افزودن «مهم بودن» به فرم خرید

حالا «مهم بودن» را به فرم خرید اضافه کن. آیتم بساز؛ لیست را به روز کن.

<div id="app">
  <form v-on:submit.prevent="addItem">
    <p>Add item<\/p>
    <p>Item name: <input type="text" required v-model="itemName"><\/p>
    <p>How many: <input type="number" v-model="itemNumber"><\/p>
    <p>
      Important?
      <label>
        <input type="checkbox" v-model="itemImportant">
        {{ itemImportant }}
      <\/label>
    <\/p>
    <button type="submit">Add item<\/button>
  <\/form>
  <hr>
  <p>Shopping list:<\/p>
  <ul>
    <li v-for="item in shoppingList">{{ item.name }}, {{ item.number }}<\/li>
  <\/ul>
<\/div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
<script>
const app = Vue.createApp({
  data() {
    return {
      itemName: null,
      itemNumber: null,
      itemImportant: false,
      shoppingList: [
        { name: 'Tomatoes', number: 5, important: false }
      ]
    };
  },
  methods: {
    addItem() {
      const item = {
        name: this.itemName,
        number: this.itemNumber,
        important: this.itemImportant
      };
      this.shoppingList.push(item);
      this.itemName = null;
      this.itemNumber = null;
      this.itemImportant = false;
    }
  }
});
app.mount('#app');
<\/script>

مشاهده در ادیتور

علامت گذاری «یافت شد» در لیست خرید

روی آیتم کلیک کن تا بین «پیدا شد» و «نشد» جابه جا شود. با v-show دو لیست می سازیم.

<div id="app">
  <form v-on:submit.prevent="addItem">
    <p>Add item<\/p>
    <p>Item name: <input type="text" required v-model="itemName"><\/p>
    <p>How many: <input type="number" v-model="itemNumber"><\/p>
    <button type="submit">Add item<\/button>
  <\/form>
  <p><strong>Shopping list:<\/strong><\/p>
  <ul id="ulToFind">
    <li v-for="item in shoppingList" v-on:click="item.found = !item.found" v-show="!item.found">{{ item.name }}, {{ item.number }}<\/li>
  <\/ul>
  <ul id="ulFound">
    <li v-for="item in shoppingList" v-on:click="item.found = !item.found" v-show="item.found">{{ item.name }}, {{ item.number }}<\/li>
  <\/ul>
<\/div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
<script>
const app = Vue.createApp({
  data() {
    return {
      itemName: null,
      itemNumber: null,
      shoppingList: [
        { name: 'Tomatoes', number: 5, important: false, found: false }
      ]
    };
  },
  methods: {
    addItem() {
      const item = {
        name: this.itemName,
        number: this.itemNumber,
        important: false,
        found: false
      };
      this.shoppingList.push(item);
      this.itemName = null;
      this.itemNumber = null;
    }
  }
});
app.mount('#app');
<\/script>

مشاهده در ادیتور

فرم پویا با v-model و v-show

در نمونه پیشرفته، فرم بر اساس انتخاب ها تغییر می کند. دسته را انتخاب کن، سپس آیتم و تعداد را بزن.

مشاهده در ادیتور

گام های عملی

1. ورودی ها را بساز و با v-model وصل کن.
2. روی فرم، submit.prevent بگذار تا رفرش نشود.
3. متد اضافه کردن آیتم را پیاده کن و فرم را ریست کن.

جمع بندی سریع

• v-model اتصال دوطرفه می دهد.
• همه ورودی ها را یکدست مدیریت می کند.
• با v-show فرم ها پویا می شوند.
• submit.prevent جلوی رفرش می ایستد.

ادامه مسیر: سر بزن به فرم ها (Forms) و بایندینگ CSS برای تکمیل مسیر v-model.