在 Vue.JS 中將數組值解析為道具

Question

我有以下組件用於父級中的“選擇”選項：

<template>
  <label class="label" for="select">{{ label }}</label>
  <select class="form-control form-control" v-bind:name="name" id="select">
    <option v-bind:options="options" v-for="(value, index) in options" :key="index">{{ value.objectValue }}</option>
  </select>
</template>


export default {
  name: "Select",
  props: {
    label: String,
    options: Array,
    name: String,
    objectValue: String
  }
}

我解析的數組由對象組成，如下所示：

let array = [{name: valueOne}, {name: valueTwo}]

我的問題是當我通過道具“objectValue”時它沒有 select 它。 這就是我使用組件的方式：

<Select label="Select country" objectValue="name" v-bind:options="array"/>

所以我得到一個空白數組，但值的數量正確。 所以問題應該圍繞從 objectValue 道具解析“名稱”值。

Answer 1

select需要一個具有初始值的v-model 。

1. 聲明一個數據屬性（名為selectedOption ），並將<select>.v-model綁定到它：

    <template> <select v-model="selectedOption">...</select> </template> <script> export default { data() { return { selectedOption: null } } } </script>

2. 在objectValue上添加一個觀察者，將新值復制到selectedOption ：

    export default { watch: { objectValue: { handler(newValue) { this.selectedOption = newValue }, immediate: true, }, } }

演示