如何为 for 循环中的每个项目绑定每个 select 选项？ 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 来发送每位客人，但我希望以某种方式绑定它。我不知道该怎么做，我也不知道我是否在寻找正确的东西。希望有人能帮助我。

Answer 1

你可以像这样object保存它

   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>

如何为 for 循环中的每个项目绑定每个 select 选项？ Vue.js

How do I bind each select option for each item in for loop? Vue.js

html-select

vue.js

v-for