javascript - 使用 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 应该为选择菜单创建一个新对象并将选项映射为数组，以便我可以将其传递到数据库并保存它们。

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

fiddle :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>

新编辑:

抱歉，我之前的答案在 fiddle 中起作用，可能是由于某种版本控制差异。无论如何，您遇到的新错误可以通过在 Vue 数据函数中定义索引来修复，如下所示:

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

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

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

您可以在每次添加 list 时手动添加它(这会很痛苦)，或者您可以设置一个 Vue 安装函数，该函数获取 list 数组的长度并自动在 selectedValues 数组中创建那么多对象索引。

安装示例

selectedValues: [],

...

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

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

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