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

Question

我正在尝试使用 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,
         "deleted_at":null,
         "created_at":"2020-08-08T13:03:50.000000Z",
         "updated_at":"2020-08-08T13:03:50.000000Z"
      },
      {
         "id":2,
         "checklists_id":1,
         "values":"Outdoor",
         "notes":null,
         "deleted_at":null,
         "created_at":"2020-08-08T13:13:27.000000Z",
         "updated_at":"2020-08-08T13:13:27.000000Z"
      }
   ]
},
{
   "id":2,
   "heading":"Location of Camera's",
   "deleted_at":null,
   "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",
         "notes":null,
         "deleted_at":null,
         "created_at":"2020-08-08T13:28:45.000000Z",
         "updated_at":"2020-08-08T13:28:45.000000Z"
      },
      {
         "id":4,
         "checklists_id":2,
         "values":"Balcony",
         "notes":null,
         "deleted_at":null,
         "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-model 应该为选择菜单创建一个新对象并将选项映射为一个数组，以便我可以将其传递到数据库并保存它们。

如果你能告诉我我哪里错了，我将不胜感激。

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

Answer 1

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

只需为每个 v-model 添加一个索引，以便它知道在更改或添加值时要覆盖 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": []
        });
    }
}

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

如果您还通过 Ajax 响应加载数据，则可以将循环放置在可以在挂载时和 Ajax 调用之后调用的方法中。但是由于它使用的是push(..)，因此您需要在这样做之前重置数组this.selectedValues = []; ... (for loop)...