vue.js - 如何绑定(bind) for 循环中每个项目的每个选择选项？ Vue.js

Question

所以我在 vue.js 中有以下代码:

<div v-for="guest in guests" :key="guest">
  <label for="attendance">Will  {{guest}}  be attending? </label>
    <select v-model="attendance">
      <option value="yes">Yes</option>
      <option value="no">No</option>
    </select>
    <br><br>
</div>

Current Output

我想知道每个客人选择了什么并将其发送到我的后端。 Guest 是从上一页发送的数组。这是它的代码:

created() {
  this.guests = this.$route.query.guests;
  this.numGuests = this.guests.length;
},

目前我只是通过发送 this.guest 来发送每位客人，但我希望以某种方式绑定(bind)它。 我不知道该怎么做，也不知道我是否在寻找正确的东西。希望有人能帮助我。

Answer 1

你可以像这样保存它作为对象

   new Vue({
      el: '#app',
      data: {
        guests: [
          'steve', 'mark', 'mario'
        ],
        attendance: {}
      }
    })

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <div v-for="guest in guests" :key="guest">
    <label for="attendance">Will  {{guest}}  be attending? </label>
    <select v-model="attendance[guest]">
      <option value="yes">Yes</option>
      <option value="no">No</option>
    </select>
    <br>
  </div>
  
  <h2>Attendace: {{ attendance }}</h2>
</div>