我正在尝试生成一个具有 2 个级别(类别和项目)的选择(使用 Vue.js 和材料设计)。一个类别可以有 X 个项目(选中或未选中)。
<md-select v-if="categories.length > 0" name="categories" id="categories" multiple >
<div v-for="(category,key,index) in categories" :key="category.id">
<md-subheader>{{category.name}}</md-subheader>
<md-option
v-if="category.subItems"
v-for="subItem in category.subItems"
:key="subItem.id"
:value="subItem.id"
selected="checkIsSelected(subItem.id)">
{{subItem.name}}
</md-option>
</div>
</md-select>
这将生成如下选择:
Category 1
[ ] - Item 1
[x] - Item 2
[ ] - Item 3
Category 2
...
我遇到的问题是当我尝试检查该项目是否已被选中(从 API 中)时,我正在使用该方法:
selected="checkIsSelected(subItem.id)"
在我的methods: {
methods: {
...
checkIsSelected (catId) {
this.selectedOld.map((catOld) => {
if (catId === catOld.id) {
return true
}
})
return false
}
}
简而言之:
我如何在元素内调用函数(带参数) V-for 为了检查/取消选中元素?
但从不调用此函数。我做错了什么?我尝试了一些其他想法,但也没有奏效。
我将感谢您的帮助,谢谢!
我用不同的方法解决了自己。希望也许可以帮助某人。
我之前没有调用for option
中的函数来检查它是否被选中并向 subItem 元素添加属性,
在第一次加载中使用 @Ricardo Orellana 解决方案时,我无法知道选择了哪个项目,只有当select
值发生变化时。
我使用 v-bind:class
选项检查子项是否已选中并标记:
<md-select v-if="categories.length > 0" name="categories" id="categories" multiple v-model="selectedNew">
<md-button class="md-icon-button" md-menu-trigger slot="icon">
<md-icon>{{icon}}</md-icon>
</md-button>
<div v-for="(category,key,index) in categories" :key="category.id">
<md-subheader>{{category.name}}</md-subheader>
<md-option
v-bind:class="{ 'md-checked' : subItem.selected }"
v-if="category.subItems"
v-for="subItem in category.subItems"
:key="subItem.id"
:value="subItem">
{{subItem.name}}
</md-option>
</div>
</md-select>
然后,在method
部分中:
...
cat.subItems = actobj
cat.subItems.map(this.markIsSelected)
...
markIsSelected (cat, index, categories) {
categories[index].selected = false
this.selectedOld.forEach(function (catOld) {
if (cat.id === catOld.optionId) {
categories[index].selected = true
return
}
})
}
感谢您的时间和帮助!
您可以尝试添加v-model="currentCategorySelected"
并使用函数@change="checkIsSelected"
。这样,只要选择新选项,就会执行并通过回调传递所选的 id。
这应该有效:
<md-select
v-if="categories.length > 0"
name="categories"
id="categories"
v-model="currentCategorySelected"
@change="checkIsSelected"
multiple>
<div
v-for="(category,key,index) in categories"
:key="category.id">
<md-subheader>
{{category.name}}
</md-subheader>
<md-option
v-if="category.subItems"
v-for="subItem in category.subItems"
:key="subItem.id"
:value="subItem.id"
>
{{subItem.name}}
</md-option>
</div>
</md-select>
您需要将selected="checkIsSelected(subItem.id)"
更改为:selected="checkIsSelected(subItem.id)"
。结肠。