title: Call a function (with parameters) inside a v-for element (Vue.js)
body: <p>I'm trying to generate a select (with Vue.js and Material Design) with 2 levels (categories and items). A category can have X items (selected or not). </p>
  
  <pre><code>&lt;md-select v-if="categories.length &gt; 0" name="categories" id="categories" multiple &gt; 
      &lt;div v-for="(category,key,index) in categories" :key="category.id"&gt;
         &lt;md-subheader&gt;{{category.name}}&lt;/md-subheader&gt;
         &lt;md-option 
            v-if="category.subItems" 
            v-for="subItem in category.subItems" 
            :key="subItem.id" 
            :value="subItem.id"
            selected="checkIsSelected(subItem.id)"&gt;
             {{subItem.name}}
         &lt;/md-option&gt;      
       &lt;/div&gt;
  &lt;/md-select&gt;
  </code></pre>
  
  <p>This generates a select like: </p>
  
  <pre><code>   Category 1
        [ ] - Item 1
        [x] - Item 2
        [ ] - Item 3
     Category 2
        ...
  </code></pre>
  
  <p><strong>The problem</strong> I have is when I try to check if the item is already selected (from an API) I'm using the method: </p>
  
  <blockquote>
    <p>selected="checkIsSelected(subItem.id)"</p>
  </blockquote>
  
  <p>And in my <code>methods: {</code></p>
  
  <pre><code>methods: {
  
  ...
  
    checkIsSelected (catId) {
      this.selectedOld.map((catOld) =&gt; {
        if (catId === catOld.id) {
          return true
        }
      })
      return false
    }
  }
  </code></pre>
  
  <p>In a brief: </p>
  
  <blockquote>
    <p>How I can call a function (with parameters) inside a element of a
    v-for in order to check/uncheck the element?</p>
  </blockquote>
  
  <p>But this function is never called. What I'm doing wrong? I tried some other thinks but didn't work either. </p>
  
  <p>I will appreciate your help, thanks!</p>