使用表單

5 分鐘

在 Vue 應用程式或元件中的 data() 函式所傳回的資料一般被稱為「狀態」。狀態是您的應用程式需要追蹤以執行必要作業的任何資訊。使用者通常會透過 HTML 表單來修改狀態。 Vue.js 可讓您將資料與表單繫結，讓使用者可以更新狀態。

V 模型

v-model 指示詞會在 HTML 控制項和相關聯的資料之間建立「雙向」繫結。因此每當表單中的值更新時，它也會在應用程式的狀態內更新。 v-model 指示詞支援任何與表單控制項間的繫結，包括核取方塊、文字方塊和下拉式清單。

注意

v-bind 指示詞會建立單向繫結。因此，使用者在表單中所做的任何變更都不會儲存在狀態中。

針對本單元中的所有範例，您將使用下列 Vue 應用程式。

Vue.createApp({
    data() {
        return {
            name: 'Cheryl',
            status: -1,
            active: true,
            benefitsSelected: 'yes',
            statusList: [
                'full-time',
                'part-time',
                'contractor'
            ]
        }
    }
})

與文字方塊繫結

若要與文字方塊繫結，請使用指示詞 v-model。

<input type="text" v-model="name" />

每當文字方塊的值變更時，name 屬性便會更新。如果您想要改用 textarea，語法是相同的。您可以像之前一樣使用 v-model="name"。

與核取方塊繫結

通常，布林值會與核取方塊繫結。核取方塊能允許選項切換。若要與此 active 選項繫結，您可以使用先前使用過的 v-model。

<input type="checkbox" v-model="active" /> Is active

有時候，切換動作不是一個布林值。相反地，您可能會有兩個選擇，例如「是」和「否」。在此情況下，您可以使用 true-value 和 false-value 來指示所選核取方塊為已勾選 (true) 或未勾選 (false)。

<input type="checkbox" v-model="benefitsSelected" true-value="yes" false-value="no"> Benefits selected: {{ benefitsSelected }}

下拉式清單

在 HTML 中，您可以建立含有兩個部分的下拉式清單。您可以使用 select 來建立清單，並使用 option 來新增選項。 select 標記會儲存選取的下拉式清單值，因此您可以使用它來與您的模型繫結。

在 Vue 中，您需要：

建立一個選項清單。 若要建立由 option 元素所組成的清單，請使用 v-for 來進行迴圈，並為陣列中的每個項目建立一個選項元素。
識別值。您需要針對每個建立出的選項識別出個別的值。舉例來說，如果您的清單只是字串的陣列，您應該將字串或選取的索引儲存為值。以下是範例：
```
<select v-model="selectedIndex">
   <option v-for="(stringItem, index) in arrayOfStrings" :value="index"> 
   {{}}
   </option>
</select>
```
如果您的清單儲存了一個陣列的物件，請指出顯示屬性以及要尋找值的位置。
```
<select v-model="selectedValue">
   <option v-for="item in items" :value="item.value">
   {{ item.displayProperty }}
   </option>
</select>  
```
追蹤選取的值。您可以使用 v-model 來將選取的值與 select 標記繫結。您可以在此追蹤項目的的索引或值。由您決定。

若要建立由選項所組成的清單，請使用 v-for 對清單執行迴圈。然後選擇將值設定為陣列中項目的索引。您可以使用 v-for(status, index) in statusList 來為每個項目提供索引。然後您可以將每個選項的 :value 設為 index，並顯示 status 為使用者的選項。

<select v-model="statusIndex">
    <!-- Create a message to select one -->
    <option disabled value="">Please select one</option>
    <!-- Use v-for to create the list of options -->
    <option v-for="(status, index) in statusList" :value="index">
        {{ status }}
    </option>
</select>

最後，您能加入 v-model="statusIndex" 以確保當使用者選取一個項目時，statusIndex 資料屬性的值會更新為被選取的索引。

使用表單

V 模型

與文字方塊繫結

與核取方塊繫結

下拉式清單

意見反應