Is there a way to use Vuesax $vs.loading in the router (router.js) file? When I try $vs.loading it is failing with undefined error, also tried with Vue.prototype.$vs.loading but still no luck.
Although not pretty, you could add the $vs object back to the prototype, after instantiating your Vue instance.
Vue.prototype.$vs = this.$vs;
Related
I am fairly new to Vue3 and web dev in general. my practice setup is with Vue3 and express.
I'm thinking using a global properties like app.config.globalProperties.$isAuthenticated and make it toggle between true and false depending on an axios call to server. Everythin works fine, except I just cannot change its state in any component by this.isAuthenticated = true or false.
Things i tried, this.$isAuthnticated, use ref or reactive in app.js to delcare it in the first place. none of them works for me. In the end i want a global variable to react to server response.
could anyone point me a right direction here? thanks in advance.
I also ran into this issue and tried to find something that resolves the issue.
I found this article about state managment. With it you can create states in the App component while using the variables in any component.
I would like to to access some properties from a plugin which was registered on my vue instance in the script tag, just before the export
Obviously i can't use the this keyword to refer to my vue instance from there, so how can I access the current vue instance?
it is not a best practice, but you can access the nuxt (so also the vue instance) with the
window.$nuxt
here you have everything you need, but you have to consider that if you're using nuxt in an SSR context, this does not work, since you cannot use the window object.
Have a situation in which there are two different components, that have templates in which there are 'this' used. Removing all 'this' from templates right now, but saw this situation and got curios why it is happening like this.
In this case it throws error:
<a :href="`${this.$locale() ? "Yes" : "No}`">
In this case it works:
<title :lang="this.$locale()">
These are just examples, but is there a reason that one works and other throws error? Couldn't find any information on this in Vue documentation. Could this be because of ternary operation?
First of all, to be clear for the people reading this, you shouldn't use this inside Vue SFC templates.
To anwser, that's because of how Vue compiles your template and its properties. I'm not an expert on Vue internal mecanics so please take what I say with caution.
:lang="this.$locale() Here, it could be that Vue removes the this reference at build time.
:href="`${this.$locale() ? "Yes" : "No}`" Here you're using a string interpolation, which is evaluated at runtime. Vue has no way to remove the this safely, because it could be refering to something else than the component instance. So this just stays as is in the final bundle and breaks at runtime.
This is just my guess from my understanding of Vue. I think only a Vue maintainer / contributor could anwser this properly.
I'm having a situation where I use a specific Vue component in multiple ways. Sometimes I initialize it as an SPA with new Vue({store}) and sometimes I use it from within another vue component.
E.g.
<template>
<component/>
</template>
How would I go about attaching a vuex store to the component in the above situation? Manually overriding the $store property obviously does not work and the Vue instance itself doesn't really shed any light on the matter. Is there a way to achieve this?
I've written a simple store factory which creates a new instance of the vuex store but I need a way to attach this to a component from within a vue template/comp.
Said component is complex enough to warrant vuex.
Apparently setting the $store property manually does do the trick.
this.$store = store
What problem does this feature solve?
<code-box title="基本" describe="button基本用法">
<i-button>Default</i-button>
</code-box>
I want to get default Slot String like <i-button>Default</i-button> in codeBox.
I can find then api _slotContents in vue 1.x.
Is there any way can get the same function in vue 2.x?
What does the proposed API look like?
_slotContents in vue 1.x
If I understand correctly, you want to use scoped slots.
If for some reason you really want to get the rendered html inside your component you can use this.$el.innerHtml.