javascript - Vue，获取选择选项的值和名称

Question

我使用 html 和 laravel 在 foreach 循环中构建选择框选项

这可以工作并使用 ID 作为值和名称作为选项进行填充。我想要的，但在这里不太明白的是，当我调用我的函数时，如何获取它并获取 id 和值作为我要进行的后 axios 调用的单独 vue 选项。

那么，当我选择该选项并提交表单来调用该函数时，如何获取 ID 作为一个 Prop ，而名称作为另一个 Prop ？

<select>
@foreach($details as $detail)    
<option value="{{$detail->id}}">{{$detail->name}}</option>
@endforeach
</select>

new Vue({
  data: {
    detailID: [''],
    detailName: ['']
  },
  methods: {
   let data = {

                detailID: this.detailID,
                detailName: this.detailName
            };
  }
})

Answer 1

这是一个仅使用 vue.js 的代码示例

模板

<div id="app">
  <select v-model="selectedDetailId">
    <option v-for="detail in details" v-bind:value="detail.id">
      {{ detail.name }}
    </option>
  </select>
</div>

脚本

new Vue({
  el: '#app',
  data: {
    selectedDetailId: null,
    details: [
      { id: 1, name: 'A' },
      { id: 2, name: 'B' },
      { id: 3, name: 'C' }
    ]
  },
  methods:{
    post(){
       //your selected Id is this.selectedDetailId
    }
  }
})

您可以在官方 Vue.js 文档中找到更多详细信息和示例。 https://v2.vuejs.org/v2/guide/forms.html#Value-Bindings