title: Vue.js - How to set multiple values (array) for a component over a property?
body: <p>I have some vue.js components, all these components get their data from outside.</p>
  
  <p>Example:</p>
  
  <pre><code>&lt;vue-button icon="fa-arrow-right" text="mytext"&gt;&lt;/vue-button&gt;
  </code></pre>
  
  <p>This works great so far but now I have to set multiple values over the property.</p>
  
  <p>This does not work:</p>
  
  <pre><code>&lt;vue-list items="['Entry1', 'Entry2']"&gt;&lt;/vue-list&gt;
  </code></pre>
  
  <p>How can I set multiple values over one property?</p>
  
  <hr>
  
  <h1>Update</h1>
  
  <p>I have a working example but I am not sure if thats the right way to go but it works. If someone knows a better way I would be happy if you share it with me/us.</p>
  
  <p>This is how I call the component:</p>
  
  <pre><code>&lt;vue-list times='[ "08:00 - 12:00", "13:00 - 21:00" ]'&gt;&lt;/vue-list&gt;
  </code></pre>
  
  <p>And this is the code of the component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;div v-for="item in timesArray"&gt;
              &lt;span v-html="item"&gt;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      props: ['times'],
      data: function() {
          return {
              timesArray: [],
          }
      },
      created: function() {
          this.timesArray = JSON.parse(this.times);
      }
  }
  &lt;/script&gt;
  </code></pre>