javascript - 在 v-for 元素 (Vue.js) 内调用函数(带参数)

Question

我正在尝试生成一个具有 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?

但是这个函数从未被调用过。我做错了什么？我尝试了一些其他的想法，但也没有奏效。

非常感谢您的帮助，谢谢!

Answer 1

最后我用不同的方法解决了自己的问题。希望也许可以帮助某人。

我之前没有调用 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
        }
      })
    }

感谢您的时间和帮助!