Forms and v-model

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

Form field များကို state နှင့်ချိတ်ရန်
trim, number, lazy modifiers သုံးရန်

ရိုးရိုးလေး ရှင်းပြမယ်

v-model သည် input value နှင့် reactive state ကို ချိတ်ဆက်ပေးသည်။ .trim က whitespace ဖယ်ရှားပြီး .number က number အဖြစ်ပြောင်းပေးသည်။ Form validation ကို submit မလုပ်ခင်ရှင်းလင်းစွာစစ်ဆေးပါ။

vue

<script setup>
import { reactive } from 'vue'
const form = reactive({ name: '', age: 18, role: 'student', agreed: false })
</script>

<template>
  <input v-model.trim="form.name" placeholder="Name">
  <input v-model.number="form.age" type="number">
  <select v-model="form.role">
    <option value="student">Student</option>
    <option value="teacher">Teacher</option>
  </select>
  <label><input v-model="form.agreed" type="checkbox"> Agree</label>
</template>

You should see

{ name: 'Mya', age: 21, role: 'student', agreed: true }

လက်တွေ့စမ်းကြည့်ရန်

Name, email နှင့် course select ပါသော enrollment form တစ်ခုတည်ဆောက်ပြီး empty field စစ်ဆေးပါ။

Form Input Bindings — Vue.js

ဒီနေရာမှာ လူအများမှားတတ်တယ်

Checkbox value ကို string ဟုယူဆခြင်း
Client-side validation တစ်ခုတည်းကို security validation အဖြစ်ယူဆခြင်း

လေ့ကျင့်ခန်း

Name, email နှင့် course select ပါသော enrollment form တစ်ခုတည်ဆောက်ပြီး empty field စစ်ဆေးပါ။

You'll know it worked when: { name: 'Mya', age: 21, role: 'student', agreed: true }