pass array of string to prop vue

Question

I am attempting to pass a array of strings to a prop...

<vue-component  attributes="[Attribute0, Attribute1, Attribute2]"></vue-component>

Here is my component

<template>
  <div id="app">       
      <ul class="content" v-bind:style="{ display: computedDisplay }" >
        <li v-for="(attribute, index) in Attributes" v-bind:key="attribute">{{index}} + " " +  {{attribute}}</li>
      </ul>

  </div>
</template>

<script>
export default {
  name: 'app',
  props: {
    elementName: {
      type: String,
      required: true
    },
    Attributes: {
      type: Array,
      required: false
    }
  },
</script>

What i was expecting was a for three elements "Attribute0"."Attribute1","Attribute3" would be created in my v-for loop, however its treating what i passed it as an array of characters....

Here is the output

0 + " " + [
1 + " " + A
2 + " " + t
3 + " " + t
4 + " " + r
5 + " " + i
6 + " " + b
7 + " " + u
8 + " " + t
9 + " " + e
10 + " " + 0
11 + " " + ,
12 + " " +
13 + " " + A
14 + " " + t\
...

What is the correct syntax for passing an array of strings to a prop?

ajobi · Accepted Answer · 2020-02-13 21:55:21Z

16

You are actually passing a string here if you read carefully:

<vue-component attributes="[Attribute0, Attribute1, Attribute2]"></vue-component>

You should be able to pass an array of strings like this:

<vue-component :attributes="['Attribute0', 'Attribute1', 'Attribute2']"></vue-component>

edited Feb 13, 2020 at 21:55

answered Feb 13, 2020 at 21:51

ajobi

3,1363 gold badges17 silver badges30 bronze badges

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

3 Comments

Terry Over a year ago

Not only that, you also need to use v-bind:attributes

ajobi Over a year ago

Fixed with a shortcut syntax ;) thanks for noticing @Terry

ajobi Over a year ago

@matt the : is in the end just a v-bind : v1.vuejs.org/guide/syntax.html#v-bind-Shorthand

Nils Alexandre Bergsten · Accepted Answer · 2020-02-13 21:54:38Z

2

You should use : before the prop, and use quotes:

<vue-component :attributes="['Attribute0', 'Attribute1', 'Attribute2']"></vue-component>

answered Feb 13, 2020 at 21:54

Nils Alexandre Bergsten

887 bronze badges

Collectives™ on Stack Overflow

pass array of string to prop vue

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related