Setting vue prop from javascript

Question

We have an old legacy MVC app that has a mixture of UI technologies in it, from razor pages, to JQuery to Vue native.

The problem I have is that the new vue components work great in isolation, but we want to instantiate the component and it's properties from an old javascript file.

Can this be done outside of the Vue entry script?

Essentially we have a Js file that loads a customer and at that point we want to bind the vue component with the customer id. I thought we could use the data dictionary to set the data attribute (which I believe vue maps to the prop) but that doesn't seem to work (there is a watch on the property).

The vue component is being used elsewhere, which is why I don't want to change it.

You can't set prop like that from outside vue, you can try to use an event bus system to communicate with the vue app, or you can use the window object/localStorage to store your data — Lk77
– Lk77, Commented Aug 18, 2022 at 12:33
You can import the old script in vue to access data and call functions for example. While the vue script is running.. maybe put stuff in localStorage? — Peter Pointer
– Peter Pointer, Commented Aug 18, 2022 at 13:50

Daniel Beck · Accepted Answer · 2022-08-18 14:28:48Z

1

In a pinch, you can access and modify Vue2 internals from external code using the __vue__ property bound to the DOM element Vue was instantiated on.

This is not officially supported, but Vue's creator says "the official devtool relies on it too, so it's unlikely to change or break." https://github.com/vuejs/vue/issues/5621

I'd recommend keeping the amount of manipulation you do this way to a minimum, but reaching in to set a customer ID should be reasonably straightforward.

(In Vue3 this is somewhat more complicated; you need to do the DOM binding yourself from within Vue.)

answered Aug 18, 2022 at 14:28

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Setting vue prop from javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related