使用 v-model 綁定多選 Select | 點燈坊

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

Version

Vue 3.4

Composition API

<template>
  <select v-model="selected" multiple>
    <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>

Line 2

<select v-model="selected" multiple>

• <select> 加上 multiple attribute 則可多選

Line 13

let selected = ref([])

• 多選 Select 的綁定值為 Array

Options API

<template>
  <select v-model="selected" multiple>
    <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 綁定值是 Array，可透過 value attribute 改變其綁定值

Reference

Vue, 選擇器