Vue: How to access global functions in component markup

[ajorias]

I'm not able to access global functions in the markup of a component.

var mySingleton = { myFunction : function() { } }

<my_component v-on:click="mySingleton.myFunction()"></my_component>

mySingleton will be UNDEFINED because of:

(function(scope /**/) { return scope.window.mySingleton.myFunction(); })

If I try to access via

<my_component v-on:click="window.mySingleton.myFunction()"">`

It is still UNDEFINED because of:

(function(scope /**/) { return scope.window.mySingleton.myFunction(); })

Shouldn't at least case 2 work so that vue does not prepend scope. because I try to access window. ?

[nirazul]

You can always define a component-method and do there whatever you want. You could also expose the window reference within the component's data.
Generally, it's a good thing that you can't access stuff that is not part of your scope. They need to be referenced within your component's methods object:

mySingleton = {
    myFunction: function() {}
}

module.exports = {
    methods: mySingleton.myFunction
}

[ajorias]

Yes, in a function is works as expected. But sometimes it is convenient to use it directly in the markup.

Declaring it in data works, but I do not want my singletons (complex services) to be 'reactivated'.

Regarding you concern about the scope: yes, but singletons provide generic and globally available services and as such in our case it is designed in a way that they can be used from everywhere.

I'm just wondering why vue prepends scope. to window. at all. I have the feeling (without going into the vue source) that window. should be some kind of exception (unless vue is dogmatic about accessing window. scope from the component markup).

[yyx990803]

Because implicitly falling back to globals will be a maintainability nightmare. When you look at a template you will have no idea whether a variable belongs to the component, or some globals defined by someone you have no idea where.

[ajorias]

Understood. So what is your recommended way to access singletons from component markup without adding them to data (which would make them reactive and this is not wanted). In fact no reactivity here is intended.

[arisliang]

So what's the recommended way? Reference of a global function should be fairly easy, as is plain javascript.

[JounQin]

Vue.prototype.whatever = yourGreatLibrary should work.

https://jsbin.com/pemugaketi

[juanvillegas]

Or you could as well do Vue.prototype.window_portal = window; and in your inline handler do window_portal.someWindowFunction() ;)

[xianshenglu]

But, if I want to do something like

 <el-checkbox
      v-model="value"
      label="test"
      @change="Object.assign(config, defaultConf)"
    ></el-checkbox>

Then I have to do ?

Vue.prototype.Object=Object
// and next time
Vue.prototype.Array=Array
//....

Is this mode good?

Or I can do this by:

<template>
 <el-checkbox
      v-model="value"
      label="test"
      @change="setDefault"
    ></el-checkbox>
</template>
//...
  setDefault(){
      Object.assign(this.config, this.defaultConf)
  }
//...

But isn't this too troublesome? just one line code but I have to write 3 lines more? and what troubles me is that I have to think of a new method name ...

So, I was seeking for a better recommended way? Anyone can help?

[Justineo]

If you really want to use global objects, I've created a demo to show how to implement this in userland with mixins: https://jsfiddle.net/Justineo/1yw8pLxg/3/

However, separating data logic from templates would be more appreciated.

[xianshenglu]

your solution is like vm.Object=Object. I think it's not better than Vue.prototype.Object=Object. @Justineo

[juanvillegas]

@xianshenglu if you are only using setDefault in one component, I would do like in your second example as it adds readability and its more clear to other developers reading your code.
If this is something you will use across the app, I would consider writing a little private library, loading it into the Vue.prototype object and then using it. Like so:

Vue.prototype.MyClassThatDoesThings = MyClassThatDoesThings

Then, in your component's html:

@change = MyClassThatDoesThings.setDefault(...)

[ithieund]

Try this
Vue.prototype.global = window;

Then you can use global variable in Vue template like this
@change="global.Object.assign(A, B)"
@change="global.YourClass.yourFunction()"

Happy coding!

[juanvillegas]

Why not just Vue.prototype.window = window...?

On Thu, Feb 14, 2019, 03:30 ithieund [e-mail] wrote:

Try this
Vue.prototype.global = window;

Then you can use global variable in Vue template like this
@change https://github.com/change="global.Object.assign(A, B)"
@change https://github.com/change="global.YourClass.yourFunction()"

Happy coding!

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue/issues/2417#issuecomment-463495039, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAvMHTbvg4U9VLEmCfwKUFR9ykzZVVbMks5vNPRsgaJpZM4HnhD3
.