Node-RED Dashboard 2.0 ui-template集成Vue v-date-picker消息发送故障

使用Node-RED Dashboard 2.0的ui-template组件集成Vuetify日期选择器，组件能正常显示并选择日期，但选中日期后无法将消息发送到后续的Debug节点，调试面板无任何输出。尝试过多种代码版本及AI工具建议，均未解决问题。

当前使用的ui-template代码 #

<template>
  <div id="app">
    <v-date-picker v-model="selectedDate" @change="sendDate" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null,
    };
  },
  methods: {
    sendDate() {
      this.$emit('date_picked', this.selectedDate);
    },
  },
};
</script>

Node-RED 流配置 #

[
    {
        "id": "6d40c240f7e12805",
        "type": "ui-template",
        "z": "513b99fa31e5eec8",
        "group": "ec50090ef36dcfd7",
        "page": "",
        "ui": "",
        "name": "Select_Analysis_Date",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n  <div id=\"app\">\n    <v-date-picker v-model=\"selectedDate\" @change=\"sendDate\" />\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      selectedDate: null,\n    };\n  },\n  methods: {\n    sendDate() {\n      this.$emit('date_picked', this.selectedDate);\n    },\n  },\n};\n</script>\n\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 540,
        "y": 680,
        "wires": [["4b19ea276f8d9ac6"]]
    },
    {
        "id": "4b19ea276f8d9ac6",
        "type": "debug",
        "z": "513b99fa31e5eec8",
        "name": "debug 53",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 940,
        "y": 680,
        "wires": []
    },
    {
        "id": "ec50090ef36dcfd7",
        "type": "ui-group",
        "name": "Analysis Parameters",
        "page": "f28a66e1d61b8444",
        "width": "12",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "f28a66e1d61b8444",
        "type": "ui-page",
        "name": "Dashboard 2.0 Test Page",
        "ui": "957559fb8731ef90",
        "path": "/pageN",
        "icon": "home",
        "layout": "grid",
        "theme": "206b56fa3aa06394",
        "order": -1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "957559fb8731ef90",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": ["ui-notification", "ui-control"],
        "showPathInSidebar": false,
        "navigationStyle": "default"
    },
    {
        "id": "206b56fa3aa06394",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {"surface": "#ffffff", "primary": "#0094CE", "bgPage": "#eeeeee", "groupBg": "#ffffff", "groupOutline": "#cccccc"},
        "sizes": {"pagePadding": "12px", "groupGap": "12px", "groupBorderRadius": "4px", "widgetGap": "12px"}
    }
]

问题原因及修复方案 #

问题出在发送消息的方式上：Dashboard 2.0的ui-template组件中，Vue实例需要通过内置的this.send()方法将数据发送到Node-RED的下游节点，而非自定义$emit事件。

修改后的代码如下：

<template>
  <div id="app">
    <v-date-picker v-model="selectedDate" @change="sendDate" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null,
    };
  },
  methods: {
    sendDate() {
      // 使用内置方法发送标准Node-RED消息
      this.send({ payload: this.selectedDate });
    },
  },
};
</script>

额外说明 #

• this.send()是Dashboard 2.0为Vue实例注入的专属方法，会自动将消息传递到ui-template节点的输出连线中。
• 消息遵循Node-RED标准格式，通常将核心数据放在payload字段，方便后续节点处理。
• 如需携带额外元数据，可扩展消息对象，例如：this.send({ payload: this.selectedDate, topic: "analysis_date" })

内容的提问来源于stack exchange，提问作者vandel