Vue3 - 表單資料綁定

tags: Vue

category: Front-End

description: Vue3 - 表單資料綁定

created_at: 2022/07/16 15:00:00

回到 手把手開始寫 Vue3

前言

開始到開始做表單的章節了，這也是前端框架解決的其中一個問題，讓處理使用者的輸入資料變得更輕鬆。

沒有前端框架之前怎麼處理?

現在臨時想到的可能就監聽一個表單送出的事件，然後使用原生 javascript 或是 jQuery 抓出需要的欄位的 value，然後存進一個 Object 然後轉成 json 之後丟去後端。

又或者是先建立好一個物件，每次只要輸入框的東西被改變，就去修改那個物件的屬性值，最後送出前一樣轉成 json。

但是這些瑣事都要自己做，也是有那麼一點麻煩 (?)

就算你不嫌麻煩，但事實就是專案大了 code 也很亂

當你有了前端框架

你可能可以這樣做

<script setup>
import { ref } from "vue";

const name = ref("");
</script>

<template>
  <input
    class="border"
    type="text"
    :value="name"
    @input="(e) => (name = e.target.value)"
  />
  {{ name }}
</template>

你會發現你在輸入框(input)輸入什麼，外面就會印出跟你輸入一樣的東西。

但是如果只是幫忙處理讓監聽事件變得容易，好像也還好，所以還有一個語法糖 (v-model)

使用 v-model

<script setup>
import { ref } from "vue";

const name = ref("");
</script>

<template>
  <input class="border" type="text" v-model="name" />
  {{ name }}
</template>

改成這樣之後效果是一樣的。

而且 v-model 還可以針對不同的表單元件做處理，例如 textarea、select、checkbox...之類的

所以接下來就針對不同表單元件做個範例吧，而 textarea 考慮跳過，因為跟預設的 text 沒有差多少。

Checkbox

<script setup>
import { ref } from "vue";

const categories = ["A", "B", "C"];
const values = ref([]);
</script>

<template>
  <label v-for="category in categories" :key="category">
    <input type="checkbox" v-model="values" :value="category" />
    {{ category }}
  </label>

  {{ values }}
</template>

畫面上會有三個分別 A、B、C 三個核取方塊，然後畫面上會呈現你打勾了的選項。

而 radio 也大同小異，就也偷懶跳過一下

select

select 要套用 v-model 就把他丟到 select 這個標籤中。

<script setup>
import { ref } from "vue";

const selected = ref("");
</script>

<template>
  {{ selected }}
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
</template>

一些修飾符

• .lazy: 改為在事件後同步資料，(從 input 事件改為 change 事件)
• .number: 自動將值轉為數字
• .trim: 自動將左右兩側空白清除

範例

<input type="text" v-model.trim="data" />