# Small problem with v-table in template node

**URL:** https://discourse.nodered.org/t/small-problem-with-v-table-in-template-node/92324
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [11 October 2024 17:54 UTC](https://discourse.nodered.org/t/small-problem-with-v-table-in-template-node/92324 "2024-10-11T17:54:44Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![JeromeVISUALS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jeromevisuals/32/40103_2.png) [@JeromeVISUALS](https://discourse.nodered.org/u/JeromeVISUALS)
#### Post date: [11 October 2024 17:54 UTC](https://discourse.nodered.org/t/small-problem-with-v-table-in-template-node/92324/1 "2024-10-11T17:54:44Z")

</div>

Hi, it was not an easy ride, but I started to play with template node and vuetify elements, and starts to have some success.

I however see a small problem with some checkbox elements in table, however the code looks quite OK to me.... maybe very tired after so many tests all days long 🙂

In the screenshot here the "SDP support" and "use as end point" columns should use tickbox based on incoming boolean values.... but they don't.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/1/41f16d0755022ce539d179bd70c3b3919f25e46c.png)

Here is a sample of code to test if you want to (some useless code in there as well, due to testing)

```auto
[
    {
        "id": "a8109b87e6229a16",
        "type": "change",
        "z": "9ae93a3fd6fb68a7",
        "name": "Add Headers",
        "rules": [
            {
                "t": "set",
                "p": "headers",
                "pt": "msg",
                "to": "[{\"title\":\"Icon\",\"value\":\"icon\"},{\"title\":\"Key\",\"value\":\"key\",\"sortable\":true,\"width\":\"10%\"},{\"title\":\"fDesc\",\"value\":\"fDescriptor.label\",\"sortable\":true},{\"title\":\"Custom Naming\",\"align\":\"center\",\"children\":[{\"title\":\"Label\",\"value\":\"descriptor.label\"},{\"title\":\"Description\",\"value\":\"descriptor.desc\"}]},{\"title\":\"CONTROL\",\"value\":\"control\",\"sortable\":false},{\"title\":\"ACTIVE\",\"value\":\"active\",\"sortable\":false,\"width\":\"3px\"},{\"title\":\"SDP Support\",\"value\":\"sdpSupport\",\"sortable\":false,\"width\":\"3px%\"},{\"title\":\"SIPS (2022-7)\",\"value\":\"sipsMode\",\"sortable\":false},{\"title\":\"Use as End Point\",\"value\":\"useAsEndpoint\",\"sortable\":false},{\"title\":\"TAGS\",\"value\":\"tags\",\"sortable\":false}]",
                "tot": "json"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1310,
        "y": 720,
        "wires": [
            [
                "6f7530017cc4d98d"
            ]
        ]
    },
    {
        "id": "cfe09c9267365061",
        "type": "inject",
        "z": "9ae93a3fd6fb68a7",
        "name": "Ctrl true",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "tags",
                "v": "[\"Aud_2CH_LR\",\"Aud_8CH_RAW\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"]",
                "vt": "json"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.R2bad3bf9-83fb-5007-b22d-28aee63168ff\",\"rev\":\"8-2de5ef04-3032-4c6f-b347-e6c422b1a697\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":true,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A02 (ST)\",\"label\":\"AMON01-01C01_RxA02\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"IN-02_2CH\"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":false,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_2CH_LR\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"},{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.R3094b947-9890-5518-93a3-776f075f3753\",\"rev\":\"7-5c4892c1-b41b-4d0f-88e1-51de506f430c\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":true,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A03 (RAW)\",\"label\":\"AMON01-01C01_RxA03\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"IN-03_8CH\"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":true,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_8CH_RAW\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"},{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.R6e541466-f455-5b6f-9587-e63a68c98bf5\",\"rev\":\"7-ab162669-22de-419b-bddd-20b3c3768172\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":true,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A04 (RAW)\",\"label\":\"AMON01-01C01_RxA04\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"IN-04_8CH\"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":true,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_8CH_RAW\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"},{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.Rae1d5d6d-8281-511d-83e4-d3534a5ce840\",\"rev\":\"8-b0b6e014-030f-4e77-801a-79ab642f672a\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":true,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A01 (ST)\",\"label\":\"AMON01-01C01_RxA01\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"Stream \"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":true,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_2CH_LR\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"}]",
        "payloadType": "json",
        "x": 1090,
        "y": 700,
        "wires": [
            [
                "a8109b87e6229a16"
            ]
        ]
    },
    {
        "id": "6f7530017cc4d98d",
        "type": "ui-template",
        "z": "9ae93a3fd6fb68a7",
        "group": "32ea454ed2e17d66",
        "page": "",
        "ui": "",
        "name": "",
        "order": 2,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n <!-- Provide an input text box to search the content -->\n <v-text-field v-model=\"search\" label=\"Search\" prepend-inner-icon=\"mdi-magnify\" single-line variant=\"outlined\"\n hide-details>\n </v-text-field>\n\n <v-data-table v-model:search=\"search\" :group-by=\"groupBy\" :items=\"msg?.payload\" :headers=\"msg?.headers\"\n v-model=\"selected\" item-selectable=\"selectable\" select-strategy=\"all\" show-select return-object>\n <template v-slot:header.current>\n <div class=\"text-center\">Center-Aligned</div>\n </template>\n\n <template v-slot:item.descriptor.label=\"{ item }\">\n <v-text-field v-model=\"item.descriptor.label\" density=\"compact\" variant=\"outlined\" type=\"text\"></v-text-field>\n </template>\n\n <template v-slot:item.descriptor.desc=\"{ item }\">\n <v-text-field v-model=\"item.descriptor.desc\" density=\"compact\" clearable variant=\"outlined\" type=\"text\">\n </v-text-field>\n </template>\n\n <template v-slot:item.control=\"{ item }\">\n <!-- Test with CheckBox -->\n <v-checkbox-btn v-model=\"item.control\" color=\"indigo\" @click=\"send({topic: 'ctrlStatusChange', payload: item})\">\n </v-checkbox-btn>\n </template>\n\n <template v-slot:item.active=\"{ item }\">\n <!-- Test with CheckBox -->\n <v-checkbox-btn v-model=\"item.active\" color=\"green\" @click=\"send({topic: 'activeStatusChange', payload: item})\">\n </v-checkbox-btn>\n </template>\n\n <template v-slot:item.sdpSupport=\"{ item }\">\n <!-- Test with CheckBox -->\n <v-checkbox-btn v-model=\"item.sdpSupport\" color=\"red\" @click=\"send({topic: 'sdpStatusChange', payload: item})\">\n </v-checkbox-btn>\n </template>\n\n <template v-slot:item.useAsEndpoint=\"{ item }\">\n <!-- Test with CheckBox -->\n <v-checkbox-btn v-model=\"item.useAsEndpoint\" color=\"indigo\" @click=\"send({topic: 'endPointStatusChange', payload: item})\">\n </v-checkbox-btn>\n\n </template>\n\n <template v-slot:item.tags=\"{ item }\">\n <!-- Test Dropdown -->\n <v-select :items=\"msg?.tags\" v-model=\"item.tags\" chips clearable multiple label=\"Choose Tags\" @update:model-value=\"send({topic: 'ctrlStatusChange', payload: item})\"></v-select>\n {{ item.tags }}\n </template>\n\n </v-data-table>\n</template>\n\n<script>\n export default {\n data() {\n return {\n selected: [],\n search: '',\n value: []\n }\n },\n watch: {\n /* \n value: function () {\n this.send({value: this.value})\n },\n */\n selected: function () {\n // Send a message to the Node-RED flow. If a non-Object value is sent, then Dashboard will automatically wrap that into a msg.payload object.\n this.send({ topic: 'selected', payload: this.selected });\n }\n },\n // Define functions that can be called from your <template> or <script> sections\n methods: {\n/*\n mvchanged: function () {\n this.send({ payload: this.value, topic: \"v-select Update\" })\n },\n*/\n }\n }\n</script>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1480,
        "y": 720,
        "wires": [
            [
                "c41dd6371bf2e64b"
            ]
        ]
    },
    {
        "id": "c41dd6371bf2e64b",
        "type": "debug",
        "z": "9ae93a3fd6fb68a7",
        "name": "debug 440",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 1670,
        "y": 720,
        "wires": []
    },
    {
        "id": "f914a701e7b37e52",
        "type": "inject",
        "z": "9ae93a3fd6fb68a7",
        "name": "Ctrl false",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "headers",
                "v": "[{\"title\":\"Icon\",\"value\":\"icon\"},{\"title\":\"Key\",\"value\":\"key\",\"sortable\":true},{\"title\":\"fDesc\",\"value\":\"fDescriptor\",\"sortable\":true},{\"title\":\"Control\",\"value\":\"control\",\"sortable\":false},{\"title\":\"Tags\",\"value\":\"tags\",\"sortable\":false}]",
                "vt": "json"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "[{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.R2bad3bf9-83fb-5007-b22d-28aee63168ff\",\"rev\":\"8-2de5ef04-3032-4c6f-b347-e6c422b1a697\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":false,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A02 (ST)\",\"label\":\"AMON01-01C01_RxA02\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"IN-02_2CH\"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":false,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_2CH_LR\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"},{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.R3094b947-9890-5518-93a3-776f075f3753\",\"rev\":\"7-5c4892c1-b41b-4d0f-88e1-51de506f430c\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":false,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A03 (RAW)\",\"label\":\"AMON01-01C01_RxA03\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"IN-03_8CH\"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":true,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_8CH_RAW\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"},{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.R6e541466-f455-5b6f-9587-e63a68c98bf5\",\"rev\":\"7-ab162669-22de-419b-bddd-20b3c3768172\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":false,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A04 (RAW)\",\"label\":\"AMON01-01C01_RxA04\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"IN-04_8CH\"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":true,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_8CH_RAW\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"},{\"key\":\"device11.ff777e01-9457-5626-bb5f-c1da34638450.Rae1d5d6d-8281-511d-83e4-d3534a5ce840\",\"rev\":\"8-b0b6e014-030f-4e77-801a-79ab642f672a\",\"active\":true,\"codecFormat\":\"Audio\",\"control\":false,\"descriptor\":{\"desc\":\"R_2-2_ANUBIS-A01 (ST)\",\"label\":\"AMON01-01C01_RxA01\"},\"fDescriptor\":{\"desc\":\"\",\"label\":\"Stream \"},\"mainDstIp\":null,\"public\":false,\"sdpSupport\":true,\"sipsMode\":\"SIPSMerge\",\"spareDstIp\":null,\"tags\":[\"Aud_2CH_LR\",\"#ECNOY\",\"#ANUBIS\",\"CRBM_Aud\"],\"type\":\"codecVertex\",\"useAsEndpoint\":true,\"vertexType\":\"Out\"}]",
        "payloadType": "json",
        "x": 1100,
        "y": 740,
        "wires": [
            [
                "a8109b87e6229a16"
            ]
        ]
    },
    {
        "id": "32ea454ed2e17d66",
        "type": "ui-group",
        "name": "ViP device Management",
        "page": "0a322689e7d1be44",
        "width": "12",
        "height": "1",
        "order": 5,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "0a322689e7d1be44",
        "type": "ui-page",
        "name": "Nevion Device Managment",
        "ui": "e51c8ddc14062d86",
        "path": "/neviondevices",
        "icon": "home",
        "layout": "grid",
        "theme": "0d92c765bfad87e6",
        "order": 4,
        "className": "",
        "visible": true,
        "disabled": false
    },
    {
        "id": "e51c8ddc14062d86",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "navigationStyle": "default"
    },
    {
        "id": "0d92c765bfad87e6",
        "type": "ui-theme",
        "name": "Basic Blue Theme",
        "colors": {
            "surface": "#4d58ff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [11 October 2024 18:14 UTC](https://discourse.nodered.org/t/small-problem-with-v-table-in-template-node/92324/2 "2024-10-11T18:14:55Z")

</div>

It is some wierd camel case auto conversion nonesense that vue does.

I cannot find the relevant info or solution right now but suffice to say, if you rename `useAsEndpoint` to `useasendpoint` it will work.

Joe (head maintainer of dasboard 2) probably knows the answer off the top of his head

* * *

PS, please tag posts about dashboard 2 with #dashboard-2 to avoid additional confusion.

---

<div class="post-metadata">

### Author: ![JeromeVISUALS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jeromevisuals/32/40103_2.png) [@JeromeVISUALS](https://discourse.nodered.org/u/JeromeVISUALS)
#### Post date: [11 October 2024 19:15 UTC](https://discourse.nodered.org/t/small-problem-with-v-table-in-template-node/92324/3 "2024-10-11T19:15:21Z")

</div>

Hi, thanks.

The camelCase problem definitely makes sense, I knew and have seen this problem in the past, but as the data was there in the table I did not think it might be related....

Also concerning DB2 tag, I remember recently it was mentionned that all new dashboard posts would be related to DB2 by default... but maybe I did not get it correctly.

Will take care of that in the future.

Thanks again !

---

<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: [25 October 2024 19:15 UTC](https://discourse.nodered.org/t/small-problem-with-v-table-in-template-node/92324/4 "2024-10-25T19:15:30Z")

</div>

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