Bind Vue.js variable to external Javascript variable for reactivity

Hi,

This is my first post here. Thanks for your help.

Let’s say I have a web page with a javascript variable set in another script unrelated to Vue.js, for example:

    <script>
    var myExternalVar = "Hello World";
    </script>

and I have a Vue instance in the same page:

    var vm  =
      new Vue({
        el: "#app"
      });

What I have been trying very unsuccessfully to do it is bind my vue instance vm to that vue will react to any change in myExternalVar.

I tried many kinds of situations, but when I change myExternalVar the dev console, vue does not react (change) to the external javascript var change.

What I do not want to do is use AJAX to poll for changes to this “outside of vue” js var. I want to bind my vue instance to this external var so when I change it in the console, all kinds of magical things happen in my browser app.

This seems like it should be possible, but then again, the var is outside of vue, so maybe we cannot bind to vars outside of the vue ‘sandbox’?

Thanks

Note:

Basically, I want to do this with a vue binding on the external js var myExternalVar, versus doing it this very bad way:

    var timerID = setInterval(getUpdate, 1000);
    function getUpdate ()
    {
       vm.$children["0"].myvueVar = myExternalVar;
    }

I want vue to bind (react) to changes in this external js var without polling for it as above; but having vue bind to this external js var and react instantly when it changes.

We have been discussing this over at the unix forums:

Turning jQuery Code into Vue.js

But so far we cannot find any “vue binding solution” other than to use setInterval().

Try this.

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

var myVar = {
    get a() {
        return app.message
    },
    set a(b) {
	app.message = b
    }
}

BTW using v-html is not a very good idea.

Instead, you can bind src to a variable and also use conditional rendering:

<img :src="vbtheURL" v-if="vbuserId">

You can do the same for styles:

<span :style="avatarStyle" v-else>
computed: {
    avatarStyle() {
        return {
             'font-size': '3em',
             cursor: 'pointer',
             /* etc... */
        }
    }
}
2 Likes

Thanks Alex,

Will change the way our PHP script delivers the variable, as you suggested, and see if we can get your suggestion to work and post back.

Thanks again for the suggestions!

Update:

After trying a number of suggestions, made the following realization:

Some Thoughts on Vue.js

In a nutshell, I’m a huge fan of Vue for SPA, but for legacy websites build on “the old tech” of synchronous page loading and reloading, that’s totally another story.

Basically, when you create a Vue instance in your browser, you bind that Vue instance to a root DOM element. This means that everything you do within a Vue instance stays in that same Vue instance. In other words, to move information between two or more Vue instances running in your browser, you need an interprocess communication (IPC) in your browser. Also, when you load another page, the Vue instances in your prior page are destroyed, so state is not maintained when a Vue process closes and a new Vue process is created.

This is perfectly fine, of course; and what I discovered was the same thing that others before me have discovered: We generally use cookies, localStorage, or sessionStorage in the browser as a kind of primitive IPC. I guess you could consider this a kind of file system IPC (but not really), where each process running in the browser has access to data stored on the disk by the browser.