title: Vue loop - only works on #id but not .class?
body: <p>I have two sets of HTML elements to be rendered with the same data, so I use <strong>class</strong> selector:</p>
  <pre><code>&lt;ul class=&quot;example-1&quot;&gt;
    &lt;li v-for=&quot;item in items&quot;&gt;
      {{ item.message }}
    &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class=&quot;example-1&quot;&gt;
    &lt;div v-for=&quot;item in items&quot;&gt;
      {{ item.message }}
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>My Vue code:</p>
  <pre><code>var example1 = new Vue({
    el: '.example-1',
    data: {
      items: [
        { message: 'Foo' },
        { message: 'Bar' }
      ]
    }
  })
  </code></pre>
  <p>It only loops the first set of html (ul/li) but <strong>not</strong> the second set (div).</p>
  <p>Any ideas why?</p>
  <p>How can I do it for <strong>both</strong>?</p>
  <p>I modified the code above from <a href="https://v2.vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for" rel="nofollow noreferrer">here</a> which uses <strong>#id</strong>.</p>