title: Vue v3 Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive
body: <p>Edit: I fixed this error with parantheses, changing v-for to <code>v-for=&quot;(color, index) in global.base_colors&quot;</code></p>
  <p>I'm working on my first Vue (v3) app, for learning purposes.</p>
  <p>As a single page, using <code>Vue.createApp()</code>, it works fine, but I've been migrating it over.</p>
  <p>I've been getting this error</p>
  <pre><code>for(let color, index in global.base_colors);
      |                      ^  vue/no-parsing-error
  226:60  error  Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive
  </code></pre>
  <p>From this code</p>
  <pre><code>&lt;span v-for=&quot;color, index in global.base_colors&quot; v-bind:key=&quot;color&quot;&gt;
    &lt;input type=&quot;checkbox&quot; :id=&quot;'inColor'+index&quot; name=&quot;inColors&quot; :value=&quot;color.toLowerCase()&quot; class=&quot;gui&quot;&gt;&lt;label :for=&quot;'inColor'+index&quot; :style=&quot;'border-left-color: '+color.toLowerCase()+'; background-color: '+color.toLowerCase()&quot;&gt;{{color}}&lt;/label&gt;
  &lt;/span&gt;
  </code></pre>
  <p>My <code>site.global.base_colors</code> a simple array of strings <code>['red','blue','green']</code></p>
  <p>Funnily enough, the code works. I can see behind the error-overlay that color-list is rendering.</p>
  <p>When I google for this, I get pages instead for <code>Elements in iteration expect to have 'v-bind:key' directives</code></p>