Vue.js - How to set multiple values (array) for a component over a property?

Question

I have some vue.js components, all these components 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 component:

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

And this is the code of the component:

<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>

Just use :items or v-bind:items.

Bert
– Bert

2017-03-05 16:09:13 +00:00
Commented Mar 5, 2017 at 16:09 — Bert
– Bert, Commented Mar 5, 2017 at 16:09

Bert · Accepted Answer · 2017-03-05 16:40:57Z

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.

answered Mar 5, 2017 at 16:40

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user4564782 · Accepted Answer · 2017-03-05 15:13:51Z

0

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 component logic is okay.

answered Mar 5, 2017 at 15:13

user4564782

1 Comment

TatzyXY Over a year ago

No sorry, thanks for the correction. It was just a typo here on stackoverflow. It always comes as a string to the component not as an array.

Saurabh · Accepted Answer · 2017-03-05 16:02:58Z

0

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']
  }
})

answered Mar 5, 2017 at 16:02

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

1 Comment

TatzyXY Over a year ago

But if I use data I cant set it from outside as property.

Collectives™ on Stack Overflow

Vue.js - How to set multiple values (array) for a component over a property?

Update

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related