ورودی های فرم (Form Inputs)

«ورودی فرم (Form Input)» یعنی جایی که کاربر مقدار می دهد. در Vue با «وی مدل (v-model)» مقدار ورودی و داده همگام می شود؛ مثل هماهنگی دفتر نمره و کارنامه.

دکمه های رادیویی (Radio Buttons)

رادیویی یعنی یک انتخاب از چند گزینه. همه ورودی ها باید name یکسان داشته باشند. در Vue هم با v-model مقدار را می گیریم.

<template>
  <h1>Radio Buttons in Vue</h1>
  <form @submit.prevent="registerAnswer">
    <p>What is your favorite animal?</p>
    <label>
      <input type="radio" name="favAnimal" v-model="inpVal" value="Cat"> Cat
    </label>
    <label>
      <input type="radio" name="favAnimal" v-model="inpVal" value="Dog"> Dog
    </label>
    <label>
      <input type="radio" name="favAnimal" v-model="inpVal" value="Turtle"> Turtle
    </label>
    <label>
      <input type="radio" name="favAnimal" v-model="inpVal" value="Moose"> Moose
    </label>
    <button type="submit">Submit</button>
  </form>
  <div>
    <h3>Submitted choice:</h3>
    <p id="pAnswer">{{ inpValSubmitted }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inpVal: '';
      inpValSubmitted: 'Not submitted yet';
    };
  },
  methods: {
    registerAnswer() {
      if (this.inpVal) {
        this.inpValSubmitted = this.inpVal;
      }
    }
  }
};
<\/script>

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

چک باکس ها (Checkboxes)

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

<template>
  <h1>Checkbox Inputs in Vue</h1>
  <form @submit.prevent="registerAnswer">
    <p>What kinds of food do you like?</p>
    <label>
      <input type="checkbox" v-model="likeFoods" value="Pizza"> Pizza
    </label>
    <label>
      <input type="checkbox" v-model="likeFoods" value="Rice"> Rice
    </label>
    <label>
      <input type="checkbox" v-model="likeFoods" value="Fish"> Fish
    </label>
    <label>
      <input type="checkbox" v-model="likeFoods" value="Salad"> Salad
    </label>
    <button type="submit">Submit</button>
  </form>
  <div>
    <h3>Submitted answer:</h3>
    <p id="pAnswer">{{ inpValSubmitted }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      likeFoods: [];
      inpValSubmitted: 'Not submitted yet';
    };
  },
  methods: {
    registerAnswer() {
      this.inpValSubmitted = this.likeFoods;
    }
  }
};
<\/script>

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

لیست کشویی (Drop-down)

لیست کشویی از select و option ساخته می شود. با v-model گزینه انتخاب شده را می گیریم.

<template>
  <h1>Drop-down List in Vue</h1>
  <form @submit.prevent="registerAnswer">
    <label for="cars">Choose a car:</label>
    <select v-model="carSelected" id="cars">
      <option disabled value="">Please select one</option>
      <option>Volvo</option>
      <option>Saab</option>
      <option>Opel</option>
      <option>Audi</option>
    </select>
    <br><br>
    <input type="submit" value="Submit">
  </form>
  <div>
    <h3>Submitted answer:</h3>
    <p id="pAnswer">{{ inpValSubmitted }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carSelected: '';
      inpValSubmitted: 'Not submitted yet';
    };
  },
  methods: {
    registerAnswer() {
      if (this.carSelected) {
        this.inpValSubmitted = this.carSelected;
      }
    }
  }
};
<\/script>

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

انتخاب چندتایی (select multiple)

با ویژگی multiple، چند گزینه انتخاب می شود. در ویندوز کلید Ctrl و در مک Command کمک می کند.

<template>
  <h1>Select Multiple in Vue</h1>
  <p>Use Ctrl or Command to select multiple options.</p>
  <form @submit.prevent="registerAnswer">
    <label for="cars">Choose one or more cars:</label><br>
    <select v-model="carsSelected" id="cars" multiple>
      <option>Volvo</option>
      <option>Saab</option>
      <option>Opel</option>
      <option>Audi</option>
      <option>Kia</option>
    </select>
    <button type="submit">Submit</button>
  </form>
  <div>
    <h3>Submitted answer:</h3>
    <p id="pAnswer">{{ inpValSubmitted }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carsSelected: [];
      inpValSubmitted: 'Not submitted yet';
    };
  },
  methods: {
    registerAnswer() {
      if (this.carsSelected) {
        this.inpValSubmitted = this.carsSelected;
      }
    }
  }
};
<\/script>

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

ورودی های فقط خواندنی (Read Only)

برخی ورودی ها مثل file با v-model همگام نمی شوند. باید با رویداد change، داده را خودمان تنظیم کنیم.

<template>
  <h1>Input Type File</h1>
  <form @submit.prevent="registerAnswer">
    <label>Choose a file:
      <input @change="updateVal" type="file">
    </label>
    <button type="submit">Submit</button>
  </form>
  <div>
    <h3>Submitted answer:</h3>
    <p id="pAnswer">{{ inpValSubmitted }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileInp: null;
      inpValSubmitted: 'Not submitted yet';
    };
  },
  methods: {
    registerAnswer() {
      if (this.fileInp) {
        this.inpValSubmitted = this.fileInp;
      }
    },
    updateVal(e) {
      this.fileInp = e.target.value;
    }
  }
};
<\/script>

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

نمونه های دیگر (Range, Color, Textarea)

اینجا کاربر مقدار می دهد. پس فقط v-model لازم است. داده خودش می آید.

<form @submit.prevent="registerAnswer">
  <label>How tall are you?<br>
    <input v-model="heightInp" type="range" min="50" max="235"> {{ heightInp }} cm
  </label>
  <button type="submit">Submit</button>
</form>

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

<form @submit.prevent="registerAnswer">
  <label>Choose a color:
    <input v-model="colorInp" type="color">
  </label>
  <button type="submit">Submit</button>
</form>

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

<form @submit.prevent="registerAnswer">
  <label>
    <p>What do you think about our product?</p>
    <textarea v-model="txtInp" placeholder="Write something.." rows="4" cols="35"></textarea>
  </label>
  <button type="submit">Submit</button>
</form>

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

نکته: برای ورودی های وابسته به آرایه، نوع داده را درست نگه دارید. مثلاً چک باکس ها آرایه می خواهند.

پیوندهای مفید

فرم ها در Vue | v-model در Vue | مسیریابی Vue

جمع بندی سریع

• رادیویی یک انتخاب می دهد.
• چک باکس آرایه می سازد.
• select با v-model همگام می شود.
• file را با change مدیریت کن.
• range و color مستقیم مقدار می دهند.