Vue，获取 select 选项的值和名称

Question

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

这可以工作并使用 ID 作为值和名称作为选项进行填充。 我想要但在这里不太清楚的是，当我调用它时如何使用我的 function 并将 id 和 value 作为单独的 vue 选项用于我将要进行的 axios 调用。

因此，当我选择 select 选项并提交表单以调用 function 时，我怎样才能将 ID 作为一个道具而将名称作为另一个道具？

<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

Answer 2

使用v-model将选择绑定到您的组件数据。 请参阅Form input bindings ：

 new Vue({ data: { detailID: "" }, // now you can access the id with this.detailID in your post request })

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

如果您同时需要id和name ，一种解决方法可能是：

 new Vue({ data: { detail: "" }, // now you can access the id & name with this.detail.split(',') in your post request })

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

Answer 3

您需要为您的select元素设置一个 v-model 并将整个 object 绑定到每个option元素，而不是像您在示例中所做的那样仅绑定 id。 这是一个带有简单示例的代码笔。