title: Vuejs dynamic ref undefined
body: <p>I have dynamic list of input from an items list : </p>
  
  <pre><code>&lt;ul&gt;
    &lt;li v-for="item in items"&gt;
      &lt;input type="checkbox"
          :value="item._id"
          :id="item._id"
          :ref="item._id + '-checkbox'"
          @click="checkItem($event)"
      &gt;
      {{ item.libelle }}
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>As you can see, I want to bind <code>:ref</code>, dynamically, with <code>item._id</code><br>
  This is OK, <code>console.log(this.$refs)</code> gives me <code>items._id</code> concatenated as expected :</p>
  
  <blockquote>
    <p>5b116f28f1167507d7fa2004-checkbox  5b116f28f1167507d7fa2005-checkbox
    5b116f28f1167507d7fa2006-checkbox</p>
  </blockquote>
  
  <p>When an input is checked, I add into <code>itemsChecked</code> array.</p>
  
  <p>Next, in <code>mounted()</code> method, I want to loop on items checked array and check input item using their dynamic ref :</p>
  
  <pre><code>for (var i = 0; this.itemsChecked.length; i++) {
    var currentRefId = this.itemsChecked[i];      
    if (this.$refs[currentRefId + '-checkbox'] !== 'undefined') {
       this.$refs[currentRefId + '-checkbox'].checked = true;
    }
  }
  </code></pre>
  
  <p>I get an erreor: </p>
  
  <blockquote>
    <p>vue.runtime.esm.js:1689 TypeError: Cannot set property 'checked' of
    undefined</p>
  </blockquote>
  
  <p>Seeing other related topic about use dynamic ref in vuejs, I dont understand why it's not working in my example.</p>
  
  <p>In another fixed ref, it's working fine:</p>
  
  <pre><code>this.$refs.mychecbox.checked = false
  </code></pre>