Pass array from inject to vue component

Dashboard
1

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:

{
    "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."
        }
    ]
}
2

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

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

Test Flow :

[{"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"}}]
3

Seriously, thank you !!

4

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