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

**URL:** <https://discourse.nodered.org/t/when-using-vue-to-edit-custom-nodes-the-rendered-dom-cannot-be-saved-normally/92826>\
**Category:** Developing Nodes\
**Created:** [31 October 2024 08:39 UTC](https://discourse.nodered.org/t/when-using-vue-to-edit-custom-nodes-the-rendered-dom-cannot-be-saved-normally/92826 "2024-10-31T08:39:03Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![lyliang1216](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lyliang1216/32/91310_2.png) [@lyliang1216](https://discourse.nodered.org/u/lyliang1216)\
**Post date:** [31 October 2024 08:39 UTC](https://discourse.nodered.org/t/when-using-vue-to-edit-custom-nodes-the-rendered-dom-cannot-be-saved-normally/92826/1 "2024-10-31T08:39:03Z")

</div>

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

```auto
<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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/d/2d695eabaf14296307c82070ca17af01d267d39a.png)

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

```auto
<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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/8/486bdc4473dd5ddb10d924e79ad9e0c25601e6f9.png)

---

<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:** [31 October 2024 08:56 UTC](https://discourse.nodered.org/t/when-using-vue-to-edit-custom-nodes-the-rendered-dom-cannot-be-saved-normally/92826/2 "2024-10-31T08:56:47Z")

</div>

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](https://nodered.org/docs/creating-nodes/first-node).

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)

---

<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:** [31 October 2024 09:00 UTC](https://discourse.nodered.org/t/when-using-vue-to-edit-custom-nodes-the-rendered-dom-cannot-be-saved-normally/92826/3 "2024-10-31T09:00:41Z")

</div>

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

````auto
``` 
   code goes here 
```

````

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

See this post for more details - [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506)

---

<div class="post-metadata">

**Author:** ![lyliang1216](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lyliang1216/32/91310_2.png) [@lyliang1216](https://discourse.nodered.org/u/lyliang1216)\
**Post date:** [31 October 2024 10:10 UTC](https://discourse.nodered.org/t/when-using-vue-to-edit-custom-nodes-the-rendered-dom-cannot-be-saved-normally/92826/4 "2024-10-31T10:10:58Z")

</div>

Okay, thank you. I've taken your advice

---

<div class="post-metadata">

**Author:** ![lyliang1216](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lyliang1216/32/91310_2.png) [@lyliang1216](https://discourse.nodered.org/u/lyliang1216)\
**Post date:** [31 October 2024 10:11 UTC](https://discourse.nodered.org/t/when-using-vue-to-edit-custom-nodes-the-rendered-dom-cannot-be-saved-normally/92826/5 "2024-10-31T10:11:37Z")

</div>

Ok, I'll try it first

---

<div class="post-metadata">

**Author:** ![lyliang1216](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/lyliang1216/32/91310_2.png) [@lyliang1216](https://discourse.nodered.org/u/lyliang1216)\
**Post date:** [31 October 2024 10:12 UTC](https://discourse.nodered.org/t/when-using-vue-to-edit-custom-nodes-the-rendered-dom-cannot-be-saved-normally/92826/6 "2024-10-31T10:12:58Z")

</div>

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

---

<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:** [31 October 2024 10:18 UTC](https://discourse.nodered.org/t/when-using-vue-to-edit-custom-nodes-the-rendered-dom-cannot-be-saved-normally/92826/7 "2024-10-31T10:18:18Z")

</div>

> [@lyliang1216](#):
>
> how do you get the value of vue's responsive variable in oneditsave

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

You could of course NOT use vue 🤷‍♂️

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [31 October 2024 14:31 UTC](https://discourse.nodered.org/t/when-using-vue-to-edit-custom-nodes-the-rendered-dom-cannot-be-saved-normally/92826/8 "2024-10-31T14:31:43Z")

</div>

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.

---

<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:** [29 January 2025 14:32 UTC](https://discourse.nodered.org/t/when-using-vue-to-edit-custom-nodes-the-rendered-dom-cannot-be-saved-normally/92826/9 "2025-01-29T14:32:26Z")

</div>

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