Question

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

这有效，并以ID作为值和名称作为选项进行填充。我想要的，而现在还不太清楚的是，如何在调用函数时使用函数并获取ID和值作为我将要进行的post axios调用的单独vue选项。

因此，当我选择该选项并提交表单以调用该函数时，如何获得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

使用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 2

这里是仅使用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://vuejs.org/v2/guide/forms.html#Value-Bindings

Answer 3

您需要为select元素设置一个v模型，并将整个对象绑定到每个option元素，而不是像示例中那样仅将id绑定。这是一个带有简单示例的codepen。

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

3 个答案: