點燈坊

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

使用 v-for 列舉 Select

Sam Xiao's Avatar 2024-01-29

Select 要列舉的資料常來自於 JSON 檔或 API，並以 Array 形式儲存，此時要以 v-for 將 Array 於 HTML 展開。

Version

Vue 3.4

Composition API

<template>
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option v-for="(item, i) in options" :value="item.value" :key="i">
      {{ item.text }}
    </option>
  </select>
  <div>{{ selected }}</div>
</template>

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

let options = ref([
  { text: 'Apple', value: '0' },
  { text: 'Google', value: '1' },
  { text: 'Microsoft', value: '2' }
])

let selected = ref('')
</script>

Line 14

let options = ref([
  { text: 'Apple', value: '0' },
  { text: 'Google', value: '1' },
  { text: 'Microsoft', value: '2' }
])
  • <option> 資料以 Array 形式儲存於 state

Line 4

<option v-for="(item, i) in options" :value="item.value" :key="i">
  {{ item.text }}
</option>
  • v-for：將 Array 或 Object 於 HTML 展開
    • 第一個參數習慣為 item，表 Array 的 element
    • 第二個參數為自動產生的 index，為 zero-based
    • index 要拿來指定 key，否則 ESLint 會有 warning
  • :：attribute binding，原本為 v-bind: 縮寫成 :，用來將 state 綁定到 HTML attribute

Options API

<template>
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option v-for="(item, i) in options" :value="item.value" :key="i">
      {{ item.text }}
    </option>
  </select>
  <div>{{ selected }}</div>
</template>

<script>
export default {
  data: () => ({
    options: [
      { text: 'Apple', value: '0' },
      { text: 'Google', value: '1' },
      { text: 'Microsoft', value: '2' }
    ],
    selected: ''
  })
}
</script>
  • 最後附上相同功能的 Options API 供參考
  • State 宣告在 data() function
  • v-model 與 v-for 使用上不變

Conclusion

  • Select 的 Option 資料常來自於 Array，因此特別適合使用 v-for 列舉 Select

Reference

Vue, 選擇器

# Vue