Is there a reliable way to check if an object is a Vue.js component?
You can use instanceof, as following code:
var isVueComp = vuecomp instanceof Vue
If it isVueComp is true, it is a Vue.js componeny otherwise not.
You can also use vuecomp.prototype.constructor, which will return reference to the Object constructor function that created the instance object.
Check this fiddle.
Like Saurabh wrote, instanceof is probably the best way to be sure. However, in case you don't want to import Vue just for this purpose, you could use this._isVue.
The simplest way to check if a an object is a Vue component, as in 2020l, is probably the _isVue property of the component, which, in case of the given object being a Vue.js component, exists as key-value at the root of the object and returns true.
Const isVueComponent = [VUE_COMPONENT_OBJECT]._isVue
Related
My recent work in Vue (we're still using Vue 2 unfortunately) has caused me to question my understanding of how Vue checks property values and re-renders.
I've got a couple of components on my page which have a v-show clause tied to a get statement in the code:
<my-component v-show="this.isRequired">
public get isRequired(): boolean {
if(this.model.myBooleanProperty == true && this.model.myNumberProperty > 0) {
return true;
}
if(this.model.myOtherBooleanProperty == true && this.model.myOtherNumberProperty > 0) {
return true;
}
return false;
}
Now, my understanding is that Vue would check this function whenever any of the involved properties changed. So if the values of any out of myBooleanProperty, myNumberProperty, myOtherBooleanProperty and myOtherNumberProperty changed then isRequired would be checked and the v-show clause would cause the component to show or not show depending on the outcome.
However, I've learned this isn't the case. By commenting out parts of the function, it seems that only changes to myBooleanProperty, myNumberProperty, myOtherBooleanProperty ever cause isRequired to be checked, even if they're taken out of the function. myOtherNumberProperty never causes it to be checked, even if it's directly manipulated in isRequired by setting it to zero or null.
Can someone please explain what, under these circumstances, causes Vue to reevaluate the value of isRequired?
Don't use this in the template, it's not necessary.
I understand you use vue-property-decorator library, right? Cause a get x property is a class getter, which is compiled down to a Vue computed property.
You are right, computed properties react and reevaluate whenever one of their reactive dependency updates. myOtherNumberProperty should also trigger the computed to reevaluate its value.
Maybe you have a reactivity problem with this property. Check that this value is properly initialized in your data function. If it's missing in the initial model object, Vue won't make it reactive and thus, its changes won't trigger anything.
I can't help further more without additional context on your code.
I created a component, I want to call the model value. If I do it the first way, but when I try to do it the second, I get this error.
[Vue warn]: Error in data(): "TypeError: Cannot read properties of undefined (reading 'value')"
The first way
The second way
I want to use second way because i want create own component vuetify date-picker and i want to pass date to him.
Unless it is possible to rewrite the first one in such a way that I can write the date in this way. Is there any way to "vm"? I am using this https://vuetifyjs.com/en/components/date-pickers/#formatting
Thank you for answering
Vue automatically binds the regular functions that are provided to its data or methods sections to the component instance. However, arrow functions can not be bound - the this keyword inside arrow functions refers to the closest outer context/scope. But since there is no such context for the data section - your this is undefined.
You should either use a regular function instead of arrow function when defining your data section - or you should leave the values in the arrow function undefined and assign the initial values inside the created hook.
You should use in arrow function like this.
props: ['value'],
data: vm => ({
props: vm.value
});
i always use constants types for vuex eg.
const SET_CATEGORY = 'setCategory'
but now i want to use modules with namespace and im stuck, should i change names (for example for module 'game') to
const SET_CATEGORY = 'game/setCategory' ?
When im doing this, my mutation looks 'game/game/setCategory'.
I know why it looks like that (becouse i use same constants types to create and call mutation) but don't know how deal with it.
I can just call mutations like
store.commit('game/${SET_CATEGORY}') but thats doesnt look good.
ps.Sorry for mistakes, im not native.
Cheers
When using namespaces you don't need to change your mutation and action names. So:
const SET_CATEGORY = 'setCategory' //stays the same
And as you correctly put, to reference this mutation in a module named 'game:
store.commit(`game/${SET_CATEGORY}`);
or
const moduleName = 'game';
store.commit(`${moduleName}/${SET_CATEGORY}`);
In beforeRouteEnter event I call to promise/http which take a second to get some data.
After I get the data I pass to the result prop in the component. (using next function).
Also I have a getter that take the value from the prop.
The problem is vue is invoke the getter before it set the value (by next function), so I got undefined.
How can I solve this error?
Here is an code example of the problem
Problem is that when you use next(vm ...) you work with context of page component where is your #Prop defined. You can't modify #Prop value this way. There is some hacks how you can do that but is it really necessary to use #Prop in this case? Why you simply don't use basic variable in page component?
If you replace
#Prop() result
with:
result: Object = {};
everything works great.
If you really need prop here maybe you can just copy prop value to some variable (use watch if you need detect changes) but i don't see any purpose for prop here.
Hope this answer helps you :)
I have a .jade source files and want to insert it into Vue app.
In sources I have the following code:
_mixins.jade:
- var domain = "example.com"
index.jade:
include _mixins
title #{domain}
And it, obviously, works.
What I want - is:
App.vue:
- var domain = "example.com"
div#app
HelloWorld
HelloWorld.vue:
h1 #{domain}
Is it possible at all? Or I'd have to have separate file with mixins and include it to every component, that'd use mixins and global variables?
Yes. The specific method is dependent on your project building system.
If you are using the Vite, define the globals in dedicated property of first parameter of pugPlugin(options, locals) of vite-plugin-pug.
If you are using the pug-loader for Webpack, specify your global variables in globals option.
If you are using the pug-plugin for Wepback, it has own loader with globals option.
Based on #takeshi-tokugawa-yd's answer.
To add a global variable, you need to add a property to the global object. As soon as you have this field in global, pug will automatically resolve it without the need to touch its configuration.
Here is an example:
vite.config.ts
(global as any).domain = 'example.com';
(global as any).protocol = 'https';
index.pug
h1 #{protocol}://#{domain}
Hovewer, it is far from implicitly included mixin with variables as in the question. It's more an ugly hack, because you need to modify the global object. Thus, I think that it's not possible to achieve what I wanted in the question.