點燈坊

失くすものさえない今が強くなるチャンスよ

使用 v-model 綁定單選 Select

Sam Xiao's Avatar 2024-01-30

v-model 不僅僅只能綁定到 Textbox，也可以綁定到單一 Select，當在 HTML 改變 Select 狀態時，JavaScript 也會連動改變 State。

Version

Vue 3.4

Composition API

<template>
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option value="0">Apple</option>
    <option value="1">Google</option>
    <option value="2">Microsoft</option>
  </select>
  <div>{{ selected }}</div>
</template>

<script setup>
import { ref } from 'vue'

let selected = ref('')
</script>
  • 下拉選單，最外層使用 <select>，內層選項使用 <option>
  • v-model：直接將 <select> 綁定到 checked state，任何在 HTML 對 state 變動會連動 JavaScript，任何在 JavaScript 對 state 變動也會連動 HTML

Line 3

<option disabled value="">Please select one</option>
  • 無法被選，僅能用來提示的 <option> 要加上 disabled attribute
  • value：<option> 欲綁定的值

Line 14

let selected = ref('')
  • 單選 Select 的綁定值為 String

Options API

<template>
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option value="0">Apple</option>
    <option value="1">Google</option>
    <option value="2">Microsoft</option>
  </select>
  <div>{{ selected }}</div>
</template>

<script>
export default {
  data: () => ({
    selected: ''
  })
}
</script>
  • 最後附上相同功能的 Options API 供參考
  • State 宣告在 data() function
  • v-model 使用上不變

Conclusion

  • Select 一樣可以使用 v-model 綁定
  • 單選 Select 綁定值是 String，可透過 value attribute 改變其綁定值

Reference

Vue, 選擇器

# Vue