使用 v-for 在 vue 中填充多选菜单和选项
Posted
技术标签:
【中文标题】使用 v-for 在 vue 中填充多选菜单和选项【英文标题】：Populate multiple select menu and options in vue using v-for 【发布时间】：2020-12-02 11:24:18 【问题描述】：我正在尝试使用 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/
【问题讨论】：
【参考方案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)...
【讨论】：
我之前尝试过，我得到 @mightyteja 我已经更新了我的答案来解决这个问题，希望它能让你走上正轨！ 谢谢.. 它确实解决了上述问题，但是当我向 api 添加更多数据时.. 我需要继续添加 "values": [], .. 数据是动态的手动添加将很难添加..任何替代方法都会很有帮助..我正在使用 Vue "version": "2.6.11", @mightyteja 嘿，我已经更新了我的答案以动态控制 selectedValues 数组。请检查并告诉我！ @mightyteja 更新后的答案仍然需要与我放置 'v-model="...selectedValues[index]['values']...' 的其他答案的一部分一起使用，因为索引引用对象，值索引引用数组以上是关于使用 v-for 在 vue 中填充多选菜单和选项的主要内容，如果未能解决你的问题，请参考以下文章