[英]Call a function (with parameters) inside a v-for element (Vue.js)
我正在尝试生成具有2个级别(类别和项目)的选择(使用Vue.js和Material Design)。 一个类别可以有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中选择了该项目时,我正在使用以下方法:
选择= “checkIsSelected(subItem.id)”
在我的methods: {
methods: {
...
checkIsSelected (catId) {
this.selectedOld.map((catOld) => {
if (catId === catOld.id) {
return true
}
})
return false
}
}
简而言之:
我如何在v-for的元素内调用函数(带有参数)以检查/取消选中该元素?
但是永远不会调用此函数。 我做错了什么? 我尝试了其他一些想法,但也没有起作用。
感谢您的帮助,谢谢!
您可以尝试添加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)"
。 结肠。
最后,我用另一种方法解决了自己。 希望也许可以帮助某人。
我之前没有调用for option
的函数,而是调用API来检查它是否先前已选择并将属性添加到subItem元素。
第一次加载@Ricardo Orellana解决方案时,我仅在select
值更改时才知道选择了哪个项目。
我使用v-bind:class
选项检查subItem是否被选中并标记:
<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
}
})
}
感谢您的时间和帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.