尝试将 Node-Red Dashboard 2.0 ui-template 与 Vue v-date-picker 一起使用

Question

使用 Dashboard 2.0 中的 ui-template 我使用下面的代码和 Node-Red 流程来尝试获取选择在 Node-Red 消息中发送的日期，但无法让调试节点显示任何内容。尝试了许多版本的代码以及副驾驶和双子座的所有建议均无济于事。欢迎任何意见。组件显示并且似乎选择正确，但没有消息。

<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>

和节点红色流

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

Answer 1

所有输入仍然受到欢迎，但这有效...任何指向相关文档的指针都值得赞赏...

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

<script>
export default {
  data() {
    return {
      selectedDate: null,
    };
  },
  methods: {
    sendDate() {
      this.send({payload: this.selectedDate})
    },
  },
};
</script>