在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中選擇了該項目時，我正在使用以下方法：

選擇= “checkIsSelected（subItem.id）”

在我的methods: {

methods: {

...

  checkIsSelected (catId) {
    this.selectedOld.map((catOld) => {
      if (catId === catOld.id) {
        return true
      }
    })
    return false
  }
}

簡而言之：

我如何在v-for的元素內調用函數（帶有參數）以檢查/取消選中該元素？

但是永遠不會調用此函數。 我做錯了什么？ 我嘗試了其他一些想法，但也沒有起作用。

感謝您的幫助，謝謝！

Answer 1

您可以嘗試添加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>

Answer 2

您需要將selected="checkIsSelected(subItem.id)"更改為:selected="checkIsSelected(subItem.id)" 。 結腸。

Answer 3

最后，我用另一種方法解決了自己。 希望也許可以幫助某人。

我之前沒有調用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
        }
      })
    }

感謝您的時間和幫助！