When using vue to edit custom nodes, the rendered DOM cannot be saved normally

Developing Nodes
1

I would like to ask, I used vue to write the node panel configuration, why after saving, when I click the node again to open the panel, the modified content is not echoed. However, I used native html to write the input tag directly in the script tag, and it can be echoed normally after modification. Is this a vue rendering problem? How should it be solved? I hope to use vue to customize node content

This is the code and node implemented by vue, Cannot display edited content normally

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.12/vue.global.min.js"
  defer
  integrity="sha512-GQnkp3HbW6BBv2mlZ7ZmzEfJcoaTJSMKBjORQCknW8HbkyV5gmJKSpDp1LLXdJDaZg+pH4/Hx5isR8Eyx6YYsQ=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/element-plus/2.8.6/index.full.min.js"
  defer
  integrity="sha512-sIvHq0+PDO52slnEatbyU9IMO0qy/eCLH59I7uRdV3HdkzkPh5moHplaIKDlJzycA6PVk33uzH2JEFc99NURYA=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/element-plus/2.8.6/index.min.css"
  defer
  integrity="sha512-XTVfw+pzDNf5klHnkOWynAiawHWgdC/xqs5yKhs8nOqbdUjaVG59SlJCkAUrtzbmJE9ZCSgyRN9V6iNYaucApA=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>
<script type="text/javascript">
  RED.nodes.registerType("vue-node", {
    category: "custom",
    color: "#a6bbcf",
    defaults: {
      name: { value: "" },
      content: { value: "" },
      inputContent: { value: "" },
    },
    inputs: 1,
    outputs: 1,
    icon: "file.svg",
    label: function () {
      return this.name || "vue-node";
    },
    oneditprepare() {
      const app = Vue.createApp({
        template: `<el-input v-model="content" id="node-input-content"></el-input>
        <input v-model="inputContent" type="text" id="node-input-inputContent" placeholder="inputContent's input" />
        `,
        setup() {
          return {
            content: Vue.ref("content"),
            inputContent: Vue.ref("inputContent"),
          };
        },
      });
      app.use(ElementPlus);
      app.mount("#appPage");
    },
  });
</script>

<script type="text/html" data-template-name="vue-node">
  <div id="appPage"></div>
</script>

<script type="text/html" data-help-name="vue-node">
  <p>描述描述</p>
</script>

image
image771×397 11.2 KB

This is the code and node of native html implementation, The edited content can be echoed normally

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.12/vue.global.min.js"
  defer
  integrity="sha512-GQnkp3HbW6BBv2mlZ7ZmzEfJcoaTJSMKBjORQCknW8HbkyV5gmJKSpDp1LLXdJDaZg+pH4/Hx5isR8Eyx6YYsQ=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/element-plus/2.8.6/index.full.min.js"
  defer
  integrity="sha512-sIvHq0+PDO52slnEatbyU9IMO0qy/eCLH59I7uRdV3HdkzkPh5moHplaIKDlJzycA6PVk33uzH2JEFc99NURYA=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/element-plus/2.8.6/index.min.css"
  defer
  integrity="sha512-XTVfw+pzDNf5klHnkOWynAiawHWgdC/xqs5yKhs8nOqbdUjaVG59SlJCkAUrtzbmJE9ZCSgyRN9V6iNYaucApA=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>
<script type="text/javascript">
  RED.nodes.registerType("vue-node", {
    category: "custom",
    color: "#a6bbcf",
    defaults: {
      name: { value: "" },
      inputContent: { value: "" },
    },
    inputs: 1,
    outputs: 1,
    icon: "file.svg",
    label: function () {
      return this.name || "vue-node";
    },
  });
</script>

<script type="text/html" data-template-name="vue-node">
  <input
    type="text"
    id="node-input-inputContent"
    placeholder="inputContent's input"
  />
</script>

<script type="text/html" data-help-name="vue-node">
  <p>描述描述</p>
</script>

image
image754×358 5.95 KB

2

For Node-RED to "do its thing", it works on real DOM and depends on the Elements being named (having an ID) as per the documentation.

Since Vue uses virtual DOM and such, you will need to save & restore property values manually.

Use the oneditprepare to populate your fields from this.xxx.
Use oneditsave to store your users input into this.xxx property.

for example you have an entry in the defaults named content, therefore in oneditsave, you need to set this.content = <USER_INPUT> and in oneditprepare you need to populate the content field from <USER_INPUT> = this.content

Search oneditprepare and oneditsave on the forum (lots of posts - should provide enough clues)

3

PS, in future, please post code as text - screenshots are not searchable and it is difficult to make suggestions since we cannot easilty copy/edit your code and give you solutions!

How to post code/json/data...

In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote ```)

``` 
   code goes here 
```

You can edit and correct your post by clicking the pencil :pencil2: icon.

See this post for more details - How to share code or flow json

4

Okay, thank you. I've taken your advice

5

Ok, I'll try it first

6

But how do you get the value of vue's responsive variable in oneditsave

7

That is entirely a vue / dev issue (not related to Node-RED).

You could of course NOT use vue :man_shrugging:

8

Try assigning the Vue app to a top-level variable in your script.

Honestly, while you are, of course, perfectly entitled to do this, I personally would strongly recommend you don't. The Node-RED editor is already a large page and already has jQuery and jQueryUI frameworks attached. Your custom node is "only" contributing a single small element and Vue is much better suited to delivering the whole page.

I would recommend using jQuery which is already well integrated and should be able to do anything you need in a custom node's configuration panel.