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。 這是一個帶有簡單示例的代碼筆。