Yes, yours works for me too, does not give the same behaviour. My example is this:
[{"id":"ba23c5db8f9b0c83","type":"ui-template","z":"0e3249ddee2000e3","group":"","page":"","ui":"cb79bc4520925e32","name":"From-To Dates dialog","order":0,"width":0,"height":0,"head":"","format":"<!-- \n This pops up an OK/Cancel dialog when sent a payload of the form\n {\n title: \"Kitchen thermostat\",\n content: \"Enter the target temperature\",\n okText: \"OK\", // optional, if not present defaults to OK\n cancelText: \"Cancel\", // optional, defaults to Cancel\n fromdatelabel: \"From date\",\n fromdatevalue: \"2024-03-22\",\n todatelabel: \"To date\",\n todatevalue: \"2024-04-22\"\n }\n All properties may contain embedded html tags such as <br/>\n If msg._client is present and contains a socketId (as will be the case if the template is triggered\n from another widget such as a button) then the popup will only appear on the matching session.\n For example, if a button widget is fed into the template then the popup will appear only on the browser where the button\n was clicked.\n If msg._client is not present then the popup will appear on all connected browsers and will have to be acknowleged on each one.\n\n When one of the buttons is clicked a message is sent with msg.payload containing the ok or cancel text\n-->\n<template>\n <v-dialog width=\"auto\" v-model=\"showDialog\">\n <v-card color=\"white\" v-click-outside=\"{handler: onClickOutside}\">\n <v-toolbar color=\"primary\">\n <v-card-title>\n <span>{{title}}</span>\n </v-card-title>\n </v-toolbar>\n <v-card-text>\n <div class=\"text-h6\" v-html=\"content\"></div>\n <div class=\"d-flex py-2 justify-space-between\"></div>\n <v-text-field :label=\"fromdatelabel\" v-model=\"fromdatevalue\" type=\"date\"></v-text-field>\n <div class=\"d-flex py-2 justify-space-between\"></div>\n <v-text-field :label=\"todatelabel\" v-model=\"todatevalue\" type=\"date\"></v-text-field>\n </v-card-text>\n \n <v-card-actions class=\"justify-end\">\n <v-btn variant=\"elevated\" size=\"large\" @click=\"cancelDialog\" v-html=\"cancelText\"></v-btn>\n <v-btn variant=\"elevated\" size=\"large\" @click=\"okDialog\" v-html=\"okText\"></v-btn>\n </v-card-actions>\n </v-card>\n </v-dialog>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n dialogData:null\n }\n },\n watch: {\n msg: function(){\n // only show the dialog if msg.payload is an object and the socket id in the message\n // matches our socket id (which means the popup was initiated from this session) or\n // there is no _client property present which indicates it should be shown on all sessions.\n if (typeof this.msg.payload === \"object\" && (!this.msg._client || this.msg._client.socketId === this.$socket.id)) { \n this.dialogData = this.msg.payload;\n if (!this.dialogData.okText) {\n this.dialogData.okText = \"OK\";\n }\n if (!this.dialogData.cancelText) {\n this.dialogData.cancelText = \"Cancel\";\n }\n this.dialogData.show = true;\n this.fromdatevalue = this.msg.payload?.fromdatevalue ?? \"\";\n this.todatevalue = this.msg.payload?.todatevalue ?? \"\";\n }\n // prevent redraw on deploy\n this.msg.payload = null\n }\n },\n methods:{\n okDialog:function(){\n this.dialogData.show = false;\n this.msg.payload = { action: this.dialogData.okText, fromdatevalue: this.fromdatevalue, todatevalue: this.todatevalue };\n this.send(this.msg);\n },\n cancelDialog:function(){\n this.dialogData.show = false;\n this.msg.payload = { action: this.dialogData.cancelText };\n this.send(this.msg);\n },\n onClickOutside () {\n this.dialogData.show = false;\n this.msg.payload = { action: this.dialogData.cancelText };\n this.send(this.msg);\n },\n },\n computed : {\n title:function(){\n return this.dialogData?.title ?? \"\"\n },\n content:function(){\n return this.dialogData?.content ?? \"\"\n },\n okText:function(){\n return this.dialogData?.okText ?? \"OK\"\n },\n cancelText:function(){\n return this.dialogData?.cancelText ?? \"Cancel\"\n },\n showDialog: function (){\n return this.dialogData?.show === true\n },\n fromdatelabel: function (){\n return this.dialogData?.fromdatelabel ?? \"\"\n },\n todatelabel: function (){\n return this.dialogData?.todatelabel ?? \"\"\n }\n },\n unmounted () {\n this.dialogData = null\n }\n}\n</script>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"widget:ui","className":"","x":400,"y":2240,"wires":[["3a4255f2ffce7ddc"]]},{"id":"915ca95b708cb602","type":"inject","z":"0e3249ddee2000e3","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"Hello","payload":"{\"title\":\"Date filter\",\"content\":\"Specify the from and to date for the filter below\",\"okText\":\"OK\",\"cancelText\":\"Cancel\",\"fromdatelabel\":\"From date\",\"fromdatevalue\":\"2024-03-22\",\"todatelabel\":\"To date\",\"todatevalue\":\"2024-04-22\"}","payloadType":"json","x":160,"y":2240,"wires":[["ba23c5db8f9b0c83"]]},{"id":"3a4255f2ffce7ddc","type":"debug","z":"0e3249ddee2000e3","name":"debug 361","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":610,"y":2240,"wires":[]},{"id":"cb79bc4520925e32","type":"ui-base","name":"My UI","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false}]
You have two sets of variables for each fields, but I don't really see how that should make a differennce.
