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 :)
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.
Can somebody explain me this use case in Vue 2?
I have two actions. The second one is called immediately after the first one. The first one set some state variables nad the second one calls getters which are based on that state variables which were set up by first action. I am not sure if the second action will have fresh data from that getters.
Hope someone understand what I mean.
Thanks for help.
If by "action" you mean "dispatch", then no.
An "action" is asynchronous, so you will have two "actions" that will attack the same resource without guaranteeing the relevance of the data.
If your first action only modifies the state, then you should use a commit which is synchronous.
Otherwise, you have to wait for the result of your first action.
An action always returns a promise so you can do something like this :
dispatch('firstAction', prop)
.then(function () {
dispatch('scdAction', prop)
})
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
});
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
Is it a proper way to change React-Navigation's params' value by assignment:
navigation.state.params.number = 123;
instead of setting it:
navigation.setParams({ number: 123 });
I noticed that the first way is synchronous, meaning that I can console.log(number) the next line and get the assigned new value, whereas the second way is asynchronous meaning that if I console.log(number) on the next line, I will get the old value.
The reason why I need the value to be accessible on the next line is that state.params holds the search input in my app and I call action creator to perform a search on the next line, therefore it must be updated before the call.
So, the question, again. Is it a proper way to change the value this way?
If you need the param value that you assigned on the next line then you can just used the variable that you assigned to param directly rather than reading it from the params.
let someValue = 'Foo';
navigation.setParams({ Bar: someValue });
console.log(someValue);
setParams is used for setting the param for the screen and it updates the navigationState with the parameter you set. If you set it directly it will not work as it should be. If you need the parameter you set right after you set it I think you might have a not so ideal logic going on.