时间戳

首页 > 解决方案 > Vue，获取选择选项的值和名称

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

问题描述

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

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

那么当我选择该选项并提交表单以调用该函数时，我怎样才能将 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
            };
  }
})

标签： javascriptvue.js

解决方案

这是一个仅使用 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

推荐阅读