How to pass vue component props array of object?

Question

I have a dropdown in my component and here is a json file that comes from back:

items:[
        {
           name:"label",
           value:"",
           options:[
              
           ]
        },
        {
           name:"hint_text",
           value:"",
           options:[
              
           ]
        },
        {
           name:"icon",
           value:"",
           options:[
              
           ]
        },
        {
           name:"selectableOptions",
           value:[
              {
                 id:"1",
                 text:"item1",
              },
              {
                 id:"2",
                 text:"item2",
                 image_url:null
              },
              {
                 id:"3",
                 text:"item3",
                 image_url:null
              },
              {
                 id:"4",
                 text:"item4",
                 image_url:null
              },
              {
                 id:"5",
                 text:"item5",
                 image_url:null
              },
              {
            ]
}
]

and this is how my component looks like:

<template>
    <div class="dropdown">
        <div class="field">
            <v-select
                label="Label" // label must be eqau to items[0].name
                hint="hint"//hint must be equal items[1].name
                persistent-hint
                background-color=""
                :items="['item1', 'item2', 'item3']"// must be equal to items[3].value.text
                outlined
            >
                <span
                    class=""
                    style="font-size:16px; color:#000000;"
                    slot="prepend-inner"
                >icon</span>// must be equal to item[2].name
            </v-select>
        </div>
    <script>
      export default {
         props: {
             items: {
                  type: Object;
         },
      };
   </script>

I got an error that items is not Object and it's an array but if I change to an array still doesn't work. and would you please help me, How to pass properly the items' elements which I write in the comments part?

Alexander Shkirkov · Accepted Answer · 2020-09-29 07:55:47Z

2

Your JSON is not fully correct and there's something wrong with template code, but I hope it's just typos.

You can just set correct type of your prop (it should be an Array) and you'll be able to pass array of props this way:

...
<div class="dropdown">
    <div>
        <v-select
            :label="items[0].name" 
            :hint="items[1].name"
            persistent-hint
            background-color=""
            :items="items[3].value"
            item-value="id"
            item-text="text"
            outlined
        >
            <span
                class=""
                style="font-size:16px; color:#000000;"
                slot="prepend-inner"
            > {{ items[2].name }} </span>
        </v-select>
    </div>
</div>
...
<script>
    export default {
        props: {
            items: {
                type: Array
            }
        }
    }
</script>

answered Sep 29, 2020 at 7:55

Alexander Shkirkov

3,8773 gold badges21 silver badges40 bronze badges

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

2 Comments

Atousa Over a year ago

if I want to add v-model what should I pass to it according to json file?

Alexander Shkirkov Over a year ago

@AtousaDehsarvi It depends on your goals. I guess, you need to store item's id (items[3].value.id), as it now declared by item-value prop. If you need to store the whole object instead of its id, you can remove item-value=... and add return-object prop

Firu 115 · Accepted Answer · 2024-01-30 10:50:13Z

0

For people looking this up in 2024 using vue3.3+ with typescript:

<script setup lang="ts">

const props = defineProps<{
    arrayOfObjects: { someNum: number, someStr: string }[]
}>()

</script>

More about it HERE

answered Jan 30, 2024 at 10:50

Firu 115

311 silver badge6 bronze badges

Collectives™ on Stack Overflow

How to pass vue component props array of object?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related