使用v-for在vue中填充多个选择菜单和选项

如何解决使用v-for在vue中填充多个选择菜单和选项

我正在尝试使用v-for在vue中创建多选问题。

“选择”菜单和选项通过JSON填充。

我无法按预期获取选择结果。

当我选择选项时，我无法保留值数据。

例如： 当我从第二个菜单中选择任何选项时，第一个菜单中的选择将被清除。反之亦然。

new Vue({
  el: "#app",data: {
    selectedValue: [],checklists: [
      {
   "id":1,"heading":"Environment","deleted_at":null,"created_at":null,"updated_at":"2020-08-08T13:24:22.000000Z","checklist_value":[
      {
         "id":1,"checklists_id":1,"values":"Indoor","notes":null,"created_at":"2020-08-08T13:03:50.000000Z","updated_at":"2020-08-08T13:03:50.000000Z"
      },{
         "id":2,"values":"Outdoor","created_at":"2020-08-08T13:13:27.000000Z","updated_at":"2020-08-08T13:13:27.000000Z"
      }
   ]
},{
   "id":2,"heading":"Location of Camera's","created_at":"2020-08-08T11:41:31.000000Z","updated_at":"2020-08-08T13:27:59.000000Z","checklist_value":[
      {
         "id":3,"checklists_id":2,"values":"Parking","created_at":"2020-08-08T13:28:45.000000Z","updated_at":"2020-08-08T13:28:45.000000Z"
      },{
         "id":4,"values":"Balcony","created_at":"2020-08-08T13:28:53.000000Z","updated_at":"2020-08-08T13:28:53.000000Z"
      }
   ]
}

    ]
  },methods: {
    getSelectedID(event) {
      console.log(this.selectedValue);
    }
  }
  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class="input-field col s12" v-for="(checklist,index) in checklists">
    <select v-model="selectedValue" @change="getSelectedID($event)" multiple="multiple">
      <option disabled>Choose options</option>
      <option v-for="(value,index) in checklist.checklist_value" :value="value.id">{{value.values}}</option>
    </select>
    <label>{{checklist.heading}}</label>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
  $(document).ready(function() {
    $('select').formSelect();
  });

</script>

期望v模型应该为选择菜单创建一个新对象，并将选项映射为数组，以便我可以将其传递给数据库并保存它们。

如果您能向我简要介绍我的错处，我将不胜感激。

提琴：https://jsfiddle.net/dvwkz15c/

解决方法

每次更改选择元素的值时，您都将分配相同的变量，因为它们都使用相同的v模型。您已经将selectedValue设置为一个数组，但是您需要将其设置为一个嵌套数组，这样您的结果就不会覆盖自己。

只需向每个v模型添加索引，以使它知道更改或添加值时要覆盖selectedValue数组的哪一部分。

<div class="input-field col s12" v-for="(checklist,index) in checklists">
    <select v-model="selectedValue[index]" @change="getSelectedID($event)" multiple="multiple">
    ...
</div>

新编辑：

很抱歉，我先前的回答之所以奏效，可能是由于某种形式的版本差异。无论如何，可以通过在Vue数据函数中定义索引来修复您遇到的新错误，如下所示：

<select v-model="selectedValues[index]['values']"  multiple="multiple">

然后将数组定义更改为带有子数组的对象定义。

selectedValues: [
    { "values": []},{ "values": []},],

您可以在每次添加检查表时手动添加（这很麻烦），或者可以设置Vue挂载函数，该函数获取检查表数组的长度并自动在selectedValues数组中创建许多对象索引。

安装示例

selectedValues: [],...

mounted: function() { 
    for(let i=0; i < this.checklists.length; i ++) {
        this.selectedValues.push({
            "values": []
        });
    }
}

无论何时将组件安装在应用程序中，这都会在数组中创建索引。根据数据的加载方式，您可能需要将Vue.nextTick(function() { ... });中的for循环括起来，但是如果这样做，则需要更改“ this”的范围。

如果您还通过Ajax响应加载数据，则可以将循环放在可以在mount以及Ajax调用之后调用的方法中。但是由于它使用的是push(..)，所以您需要先重置阵列this.selectedValues = []; ... (for loop)...