VueJS 从父级访问 v-for 中的 select 选项

Question

我的州内有一个名字和一个姓氏值，我需要从我的 select 中获取这些值才能进行 API 调用。但是当我尝试独立获取 firstName 和 lastName 的值时，这是不可能的，因为它超出了 v-for 的范围。所以我真的为此找了很多，但我找不到太多。我需要独立获取 2 select 或 firstName 和 lastName 的值。这是我的模板：

<select class="form-select" @change="showValueForTest">
  <option value="" disabled selected hidden>Select a manager</option>
  <option value="">All the managers</option>
  <option v-for="(manager,index) in managers" :key="manager+index" 
  :value="manager.firstName +' 
 '+ manager.lastName">{{manager.firstName}}{{manager.lastName}} 
 </option>
</select>

这是我检查值是否存在的方法，它给出未定义

showValueForTest(event){
  console.log(event.target.value.firstName)
}

Answer 1

你可以 v-model 到 select :

new Vue({
  el: "#demo",
  data() {
    return {
      selected: null,
      managers: [{firstName: 'aa', lastName: 'bb'}, {firstName: 'cc', lastName: 'dd'}]
    }
  },
  methods: {
    showValueForTest(){
      console.log(this.selected.firstName)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <select class="form-select" v-model="selected" @change="showValueForTest">
    <option value="" disabled selected hidden>Select a manager</option>
    <option value="">All the managers</option>
    <option v-for="(manager, index) in managers" :key="index" :value="manager">
      {{manager.firstName}}{{manager.lastName}} 
    </option>  
  </select>
</div>

VueJS 从父级访问 v-for 中的 select 选项

VueJS access select options inside v-for from parent

javascript

vue.js

vuejs2