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

【问题标题】：Vue, get value and name of select optionVue，获取选择选项的值和名称
【发布时间】：2020-03-15 07:14:30
【问题描述】：

我正在使用 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
            };
  }
})

【问题讨论】：

不清楚你想要什么以及如何使用它。给我们更多信息

标签： javascript vue.js

【解决方案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://vuejs.org/v2/guide/forms.html#Value-Bindings

【讨论】：

我尝试使用 detail.name 作为选项名称，但它只显示在前端 detailname
是的，使用 {{detail.name}} 代替 {{option.name}}，抱歉。你初始化了Vue吗？您需要用 div 包装模板并为此设置一个 id，然后在 vue 实例中添加 el 属性。我刚刚用这些附加信息编辑了答案。

【解决方案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>

【讨论】：

好吧，这确实有道理，但我也想发送 $detail->name 的值。我如何才能将两者都作为我的帖子的单独绑定？
一般来说，如果$detail->id 唯一地定义了一个细节项，我认为你不需要$detail->name？话虽如此，您应该能够通过id 过滤您的$details 数组以找到name？
好的，这适用于该值，但我仍然对使用拆分感到困惑：如何将第一个选项（id）设置为 detailID，将第二个选项（名称）设置为 detailName？
AFAIK，每个选项应该只有一个唯一标识符作为其值，因此您不能直接将一个选择绑定到两个不同的值。当然，您可以将 $details 数组传递给您的 Vue 实例，例如 this。然后您可以更优雅地访问您的数据。

【解决方案3】：

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

【讨论】：