I'm encountering the following error message when testing a component mounted with Vue utils:
Avoid mutating a prop directly since the value will be overwritten
whenever the parent component re-renders.
Instead, use a data or computed property based on the prop's value. Prop being mutated: <prop name>
When mounting a component to be tested, to prevent the error message from being shown in the console, pass the sync option to false to the mount function. See also https://vue-test-utils.vuejs.org/api/options.html#sync
Related
I have a componentized form where I have a different ref for each component and I need to validate these refs once the component is created. The problem is that during the created the refs are undefined and in the mounted the validation is giving an incorrect result for some refs.
testing exactly the same validation after mounting, gives the expected result
I am using Inertiajs
with Laravel and also trying to use Element UI components but as i use Menu component i am having following error in console, I just used example as given in Element Ui Components as i was testing.
I see 2 different errors in there, both of them are with props.
I assume your component is taking the route as a prop, and you are also using the route as a method, which you might have put inside methods: {} which is not allowed. Make sure you rename your method route to something else.
Note: As a matter of fact you can't have any data coinciding with each other. your props, data, computed props and methods all should have unique names.
You are trying to use v-model on the props directly which won't work in Vue. if the prop is a primitive (Number, String, Boolean etc). but you can pass Object or an Array which can hold a reference to the data. This is because reactivity in Vue can't keep track of props when passed as primitives.
More on prop mutations here: https://v2.vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow
As the topic suggests, I have a particular item in my vuex store which I am bringing into my component in the computed properties section using mapState. This is the code for it:
computed: mapState({
orderTitle: state => state.order.bookTitle,
}),
When I inspect this in the Vuex section of Vue Dev Tools, I can see that it is accurately getting the data from the store.
Now the problem.
I have an input text field which I have put a v-model on, and associated it with a data property. What I want to do is pre-populate that text field with the text found in orderTitle which I am getting from my store.
I tried doing this by simply assigning the value in the computed property to the data property in the mounted hook. However, this didn't work.
When I tried to troubleshoot it by doing console.log(this.orderTitle) to see the value of the computed property in the mounted hook, it showed up as blank.
How come the value is properly appearing in the Vue Dev Tools (and even in the console when I do $vm0.orderTitle) but not in the mounted hook?
Any thoughts?
Thanks!
Sounds like a "this scope" problem.
Try with
computed: mapState({
orderTitle (state) {
return state.order.bookTitle
}
}),
I figured it out. Instead of performing the actions in the mounted hook, I did it in the updated hook, which fires much later in the Vue instance lifecycle (after the Virtual DOM is re-rendered & patched).
This will result in false on the mounted hook.
But it's set to true and will also return true on a method as expected, or computed property or directly even on a v-if="" statement!
this.$store.getters.getIsLoggedIn
I'd like to use the state to perform action upon mounting the component, but am I to presume that for some reason the state is not readable at this stage? What am I not understanding about Vuex?
I am able to add component from array variables to main component using following way:
<component :is="currentTabComponent"></component>
Now I want to add another dynamic component inside rendered component.
If u say using slot then how can i access specific component's slot and push my variable component to that slot.
https://jsfiddle.net/capt8ndq/42/
I have created example fiddle have mainContainer->slider->sliderContent(this may have further nesting) structure.
I am getting following error after some progress
Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
Thanks for the help!
Instead of using slot, make use of props by passing props down to that rendered component and also modify that rendered component to also has <component :is="componentFromProps"></component>.