我正在尝试生成一个具有 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)时,我正在使用以下方法:
selected="checkIsSelected(subItem.id)"
在我的方法中:{
methods: {
...
checkIsSelected (catId) {
this.selectedOld.map((catOld) => {
if (catId === catOld.id) {
return true
}
})
return false
}
}
简而言之:
How I can call a function (with parameters) inside a element of a v-for in order to check/uncheck the element?
但是这个函数从未被调用过。我做错了什么?我尝试了一些其他的想法,但也没有奏效。
非常感谢您的帮助,谢谢!
最佳答案
最后我用不同的方法解决了自己的问题。希望也许可以帮助某人。
我之前没有调用 for 选项
中的函数,而是调用 API 来检查之前是否已选择它并向 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>
然后,在方法
部分:
...
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
}
})
}
感谢您的时间和帮助!
关于javascript - 在 v-for 元素 (Vue.js) 内调用函数(带参数),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46649697/