I have some vue.js ponents, all these ponents get their data from outside.

Example:

<vue-button icon="fa-arrow-right" text="mytext"></vue-button>

This works great so far but now I have to set multiple values over the property.

This does not work:

<vue-list items="['Entry1', 'Entry2']"></vue-list>

How can I set multiple values over one property?

Update

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.

This is how I call the ponent:

<vue-list times='[ "08:00 - 12:00", "13:00 - 21:00" ]'></vue-list>

And this is the code of the ponent:

<template>
    <div>
        <div v-for="item in timesArray">
            <span v-html="item"></span>
        </div>
    </div>
</template>

<script>
export default {
    props: ['times'],
    data: function() {
        return {
            timesArray: [],
        }
    },
    created: function() {
        this.timesArray = JSON.parse(this.times);
    }
}
</script>

I have some vue.js ponents, all these ponents get their data from outside.

Example:

<vue-button icon="fa-arrow-right" text="mytext"></vue-button>

This works great so far but now I have to set multiple values over the property.

This does not work:

<vue-list items="['Entry1', 'Entry2']"></vue-list>

How can I set multiple values over one property?

Update

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.

This is how I call the ponent:

<vue-list times='[ "08:00 - 12:00", "13:00 - 21:00" ]'></vue-list>

And this is the code of the ponent:

<template>
    <div>
        <div v-for="item in timesArray">
            <span v-html="item"></span>
        </div>
    </div>
</template>

<script>
export default {
    props: ['times'],
    data: function() {
        return {
            timesArray: [],
        }
    },
    created: function() {
        this.timesArray = JSON.parse(this.times);
    }
}
</script>

• javascript
• vue.js
• vuejs2
• vue-ponent

• Just use :items or v-bind:items. – Bert Commented Mar 5, 2017 at 16:09

3 Answers 3

Use the attribute binding syntax.

<vue-list :times='[ "08:00 - 12:00", "13:00 - 21:00" ]'></vue-list>

Note the colon in front of :times. You don't need to parse or use data.

It is not because you missed to close the Entry 2 string?

<vue-list items="['Entry1', 'Entry2]"></vue-list>

The right code is

<vue-list items="['Entry1', 'Entry2']"></vue-list>

Think it should work if the ponent logic is okay.

You have to pass it using an vue instance variable only, see this fiddle.

<div id="app">
  <child  :items="items"></child>
</div>

where items in defined as vue instance data:

new Vue({
  el: '#app',
  data: {
    full_name: "Initial Val",
    items: ['Entry1', 'Entry2']
  }
})