# Pass array from inject to vue component

**URL:** <https://discourse.nodered.org/t/pass-array-from-inject-to-vue-component/85719>\
**Category:** Dashboard\
**Created:** [21 February 2024 04:11 UTC](https://discourse.nodered.org/t/pass-array-from-inject-to-vue-component/85719 "2024-02-21T04:11:41Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Waz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/waz/32/64482_2.png) [@Waz](https://discourse.nodered.org/u/Waz)\
**Post date:** [21 February 2024 04:11 UTC](https://discourse.nodered.org/t/pass-array-from-inject-to-vue-component/85719/1 "2024-02-21T04:11:41Z")

</div>

This is absolutely doing my head in.  
I have an inject node with a json array.  
I want to inject that into a ui-template (dashboard 2.0) node and have v-for iterate the array.  
A simple list.  
I must have taken dumb pills this morning.  
The array:

```auto
{
    "tasks": [
        {
            "id": 1,
            "name": "Task 1",
            "text": "Details about task 1"
        },
        {
            "id": 2,
            "name": "Task 2",
            "text": "Details about task 2."
        },
        {
            "id": 3,
            "name": "Task 3",
            "text": "Details about task 3."
        }
    ]
}

```

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [21 February 2024 04:35 UTC](https://discourse.nodered.org/t/pass-array-from-inject-to-vue-component/85719/2 "2024-02-21T04:35:58Z")

</div>

Hello .. if your `tasks` array is in `msg.payload.tasks` then

```auto
<template>
    <div v-for="task in msg.payload.tasks" :key="task.id">
        <h2>{{ task.name }}</h2>
        <p>{{ task.text }}</p>
    </div>
</template>

```

**Test Flow :**

```auto
[{"id":"fe1b74cba6ca339d","type":"inject","z":"54efb553244c241f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{ \"tasks\": [{ \"id\": 1, \"name\": \"Task 1\", \"text\": \"Details about task 1\" }, { \"id\": 2, \"name\": \"Task 2\", \"text\": \"Details about task 2.\" }, { \"id\": 3, \"name\": \"Task 3\", \"text\": \"Details about task 3.\" }] }","payloadType":"json","x":190,"y":2980,"wires":[["f332963bc60e072d"]]},{"id":"f332963bc60e072d","type":"ui-template","z":"54efb553244c241f","group":"12caf9e6968092fd","page":"","ui":"","name":"","order":0,"width":0,"height":0,"head":"","format":"<template>\n <div v-for=\"task in msg.payload.tasks\" :key=\"task.id\">\n <h2>{{ task.name }}</h2>\n <p>{{ task.text }}</p>\n </div>\n</template>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":380,"y":2980,"wires":[[]]},{"id":"12caf9e6968092fd","type":"ui-group","name":"Group 1","page":"1a89c4c21097111f","width":"26","height":"8","order":-1,"showTitle":true,"className":""},{"id":"1a89c4c21097111f","type":"ui-page","name":"Page 1","ui":"d726187aa6c1921a","path":"/","layout":"grid","theme":"b5afc19a78309829","order":1,"className":""},{"id":"d726187aa6c1921a","type":"ui-base","name":"UI Name","path":"/dashboard"},{"id":"b5afc19a78309829","type":"ui-theme","name":"Theme Name","colors":{"surface":"#ffffff","primary":"#008000","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"}}]

```

---

<div class="post-metadata">

**Author:** ![Waz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/waz/32/64482_2.png) [@Waz](https://discourse.nodered.org/u/Waz)\
**Post date:** [21 February 2024 04:46 UTC](https://discourse.nodered.org/t/pass-array-from-inject-to-vue-component/85719/3 "2024-02-21T04:46:59Z")

</div>

Seriously, thank you !!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [6 March 2024 04:47 UTC](https://discourse.nodered.org/t/pass-array-from-inject-to-vue-component/85719/4 "2024-03-06T04:47:23Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.