# When are VueJs methods binded?

**URL:** <https://discourse.nodered.org/t/when-are-vuejs-methods-binded/93142>\
**Category:** Developing Nodes\
**Tags:** dashboard-2\
**Created:** [14 November 2024 07:00 UTC](https://discourse.nodered.org/t/when-are-vuejs-methods-binded/93142 "2024-11-14T07:00:29Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [14 November 2024 07:00 UTC](https://discourse.nodered.org/t/when-are-vuejs-methods-binded/93142/1 "2024-11-14T07:00:29Z")

</div>

Hi folks,  
Would like to support Joe a bit solving one of the 300+ dashboard issues, but lacking some VueJs knowledge unfortunately:

I have added some methods to the ui-template node, and want to use those in the created() hook:

```auto
methods: {
    setupHead() {
      ...
    },
    parseHeadElements() {
       ...
   }
},
created() {
    this.$dataTracker(this.id);
    this.parseHeadElements()
    this.updateTemplate()
}

```

But that fails because the methods seem to have not been binded yet to `this`:

```auto
TypeError: this.parseHeadElements is not a function
    at Proxy.created (index-BRXhQldV.js:246:5488)
    at callWithErrorHandling (index-BRXhQldV.js:17:2136)
    at callWithAsyncErrorHandling (index-BRXhQldV.js:17:2244)
    at callWithAsyncErrorHandling (index-BRXhQldV.js:17:2400)
    at callHook$1 (index-BRXhQldV.js:17:24414)
    at applyOptions (index-BRXhQldV.js:17:23477)
    at finishComponentSetup (index-BRXhQldV.js:17:74881)
    at setupStatefulComponent (index-BRXhQldV.js:17:74013)
    at setupComponent (index-BRXhQldV.js:17:73411)
    at q (index-BRXhQldV.js:17:46071)

```

However Joe's dashboard methods seem to have been binded already to the proxy object:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/4/c4af6532016dd1fa99a93582c04cb5e183b12e61.png)

From e.g. this StackOverflow discussion I assume that method binding happens in the lifecycle before the `created` hook has been called?

Hopefully anybody can see what I am doing wrong, because I have no clue at all.

Thanks!!  
Bart

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [14 November 2024 07:18 UTC](https://discourse.nodered.org/t/when-are-vuejs-methods-binded/93142/2 "2024-11-14T07:18:40Z")

</div>

For me the dev tools says

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/8/88287dd054993ab6f977178dbf212fee7cfb280e.png)

---

<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:** [14 November 2024 09:47 UTC](https://discourse.nodered.org/t/when-are-vuejs-methods-binded/93142/3 "2024-11-14T09:47:25Z")

</div>

That makes sense since the Vue app will likely have run through its created and mounted phases long before the template reaches it.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [14 November 2024 11:15 UTC](https://discourse.nodered.org/t/when-are-vuejs-methods-binded/93142/4 "2024-11-14T11:15:56Z")

</div>

Ah yes confusing indeed. Will need to explain it in more detail.

I have added my code snippet above to the _ **core ui-template node code** _ (at [this](https://github.com/FlowFuse/node-red-dashboard/blob/main/ui/src/widgets/ui-template/UITemplate.vue#L167) location), not inside the ui-template config screen like the users do. Because I am trying to fix a reported issue in the ui-template node core code. I am _ **not** _ trying to add that code snippet inside the editor of the ui-template node config screen.

So my `created()` hook (in the core ui-template node code) is being called, and inside this hook I want to build the DOM subtree (as specified by the user in the config screen).

So the `created()` hook of the ui-template core code is called in my debugger, but the `this` does not contain the functions which I had added to the `methods` section. Hopefully that describes my problem a bit better.

---

<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:** [14 November 2024 13:01 UTC](https://discourse.nodered.org/t/when-are-vuejs-methods-binded/93142/5 "2024-11-14T13:01:34Z")

</div>

Sorry, beyond my knowledge level of Vue.

---

<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:** [14 November 2024 14:55 UTC](https://discourse.nodered.org/t/when-are-vuejs-methods-binded/93142/6 "2024-11-14T14:55:08Z")

</div>

> [@BartButenaers](#):
>
> So the `created()` hook of the ui-template core code is called in my debugger, but the `this` does not contain the functions which I had added to the `methods` section

They should be: [vue docs](https://vuejs.org/api/options-state.html#methods)

How did you determine they were "not there" Bart?

try console logging them e.g:

```auto
created() {
    this.$dataTracker(this.id);
    console.log("this", this)
    console.log("this.parseHeadElements", this?.parseHeadElements)
    console.log("this.updateTemplate", this?.updateTemplate)
}

```

Also, did you rebuild after modifying? I often have issues with source maps (yuk). Try modifying the `vite.config.js` to provide non minified, full source.

```auto
    build: {
        // Generate a source map in dev mode
        // sourcemap: process.env.NODE_ENV === 'development',
        minify: process.env.NODE_ENV === 'development' ? false : undefined,
        outDir: '../dist',
        emptyOutDir: true
    },

```

and of course, run `npm run build:dev` or `npm run dev` for hot reload

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [14 November 2024 20:07 UTC](https://discourse.nodered.org/t/when-are-vuejs-methods-binded/93142/7 "2024-11-14T20:07:23Z")

</div>

@Steve-Mcl,  
Thanks for your assitance (and time)!

- I determined the functions where not there because (see my original post above) calling them in the `created()` hook results in a nasty stack trace.

- Yes done a couple of rebuilds, refreshed my browser, ...

- Here you can see the same result with your not-minified code and console statements:

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [14 November 2024 20:22 UTC](https://discourse.nodered.org/t/when-are-vuejs-methods-binded/93142/8 "2024-11-14T20:22:55Z")

</div>

@Steve-Mcl  
Think I found it 🥴  
Have not tested it yet, but I think that will be the root cause.  
I have two times `methods:` defined in my vue file: one time for the existing methods and one time for my new methods. Don't think that Vue will like that...  
Sorry for the noise!!!

---

<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:** [14 November 2024 20:40 UTC](https://discourse.nodered.org/t/when-are-vuejs-methods-binded/93142/9 "2024-11-14T20:40:46Z")

</div>

> [@BartButenaers](#):
>
> I have two times `methods:` defined in my vue file:

Doh! That'll do it,

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [14 November 2024 21:05 UTC](https://discourse.nodered.org/t/when-are-vuejs-methods-binded/93142/10 "2024-11-14T21:05:12Z")

</div>

> [@Steve-Mcl](#):
>
> Try modifying the `vite.config.js` to provide non minified, full source.

@Steve-Mcl,  
Is there a particular reason why your build config is not in the standard [vite.config.js](https://github.com/FlowFuse/node-red-dashboard/blob/main/vite.config.js#L42) file? Because together with that `npm run build:dev` command that seems to be working very nice. Such commands would be a welcome addition to the dashboard contribution docs, for people like me (who don't work with Vue in their daily jobs). Thanks for sharing your tips!!! Very useful...

---

<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:** [14 November 2024 21:39 UTC](https://discourse.nodered.org/t/when-are-vuejs-methods-binded/93142/11 "2024-11-14T21:39:02Z")

</div>

Only because I am in the middle of the wysiwyg stuff and I am not in a simple position to switch branch and propose it. You hit lucky (timing wise) as I only just yesterday got sick of source maps being out of step and looked for alternative (which is what i proposed to you).

~~If your env is in a better state than mine, feel free to propose a change.~~

EDIT: done - [Improve DX - dont minify dev build by Steve-Mcl · Pull Request #1471 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/pull/1471)

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [14 November 2024 21:58 UTC](https://discourse.nodered.org/t/when-are-vuejs-methods-binded/93142/12 "2024-11-14T21:58:43Z")

</div>

Thanks Steve!!

---

<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:** [13 January 2025 21:59 UTC](https://discourse.nodered.org/t/when-are-vuejs-methods-binded/93142/13 "2025-01-13T21:59:35Z")

</div>

Closed on 13 January 2025 21:59 UTC

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