title: vue bind html data attribute within for loop
body: <p>I am looping through an array of colors in vue to display color codes and also the name of the color within a tooltip. The tooltip uses data attributes via html 5.</p>
  <p>Now I am trying to bind this via vue and the only syntax I can think of and which is used in all vue documentation is this</p>
  <pre><code>&lt;div :data-tooltip=&quot;color.name&quot; v-for=&quot;(color, index) in colors&quot; :key=&quot;index&quot; @click=&quot;setColor(color)&quot; class=&quot;color-box&quot; :style=&quot;{ background: color.hexCode}&quot;&gt;
  </code></pre>
  <p>However, this won't work and results in the DOM like this:</p>
  <pre><code>&lt;div data-v-d0a245c6=&quot;&quot; class=&quot;color-box&quot; style=&quot;background: rgb(0, 247, 0);&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>I would expect it to look like this:</p>
  <pre><code>&lt;div data-attribute=&quot;Sunny yellow&quot; class=&quot;color-box&quot; style=&quot;background: rgb(0, 247, 0);&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>But for some reason, I cannot dynamically bind an attribute which uses dashes.</p>
  <p>I also tried camel casing:</p>
  <pre><code>&lt;div :dataTooltip=&quot;color.name&quot; v-for=&quot;(color, index) in colors&quot; :key=&quot;index&quot; @click=&quot;setColor(color)&quot; class=&quot;color-box&quot; :style=&quot;{ background: color.hexCode}&quot;&gt;
  </code></pre>
  <p>with the same result.
  What am I doing wrong here?</p>