When i try redirect to other router in watcher, console gives me this error:
Can somebody help me and tell why is this happening?
Thanks!
watch: {
lifes : function() {
console.log('lifes watcher work')
if(this.lifes === 0) {
this.$route.router.go('/ending');
}
}
},
I find other ways like this.router.go('/ending') or just router.go('/ending') but also doesn't work.
ERROR:
[Vue warn]: Error in callback for watcher "lifes": "TypeError: Cannot read property 'go' of undefined"
Related
Editorial.vue;
<templates>
<div class="col offset-2">
<router-link to="editorial">
<base-button type="info" #click="saveUserData">Save</base-button>
</router-link>
</div>
</templates>
data() {
return {
userdetails: {
logoURL: null
}
}
},
methods: {
saveUserData: function () {
let formData = new FormData()
formData.append('logoURL', this.userdetails.logoURL)
this.api.uploadFile('editorial/'+store.state.journalId+'/editorialimage'
,formData'journals/v1/').then((res) => {
this.userdetails.journalId = store.state.journalId
this.userdetails.imageId = res.data.status
this.createNewMember()
}, (err) => {
console.log(err)
})
},
When I click save button I'm getting the below error
"Invalid handler for event "click": got undefined
found in
---> <BaseButton> at src/components/BaseButton.vue
<RouterLink>
<Card> at src/components/Cards/Card.vue
<Anonymous>
<ZoomCenterTransition>
<DashboardLayout> at src/pages/Layout/DashboardLayout.vue
<App> at src/App.vue
<Root>"
"I'm getting the above error I don't the solution, the function name also mentioned correctly but still I'm getting the same error. Searched some of the solution but nothing worked. The function posting some data to the server but while clicking the button getting the error". Tried lots of ways to solve this but its all failed.
"I'm getting the above error I don't the solution, the function name also mentioned correctly but still I'm getting the same error. Searched some of the solution but nothing worked. The function posting some data to the server but while clicking the button getting the error". Tried lots of ways to solve this but its all failed.
What is that base-button? if that a custom component, you need to define emit event from the component, so the parent can catch the event and fire the saveUserData function
you might be want to provide some information about your custom component
here some detail how to use emit
https://vuejs.org/guide/components/events.html
Getting this error while using mapState in vuex
computed: mapState(['count'])
where else it is working fine when use like below:
computed: {
count () {
return store.state.count
}
}
This happens due to version issue. After downgrading to vuex 2^ its working fine.
This is a Laravel & Vue Js Project.
Everything works fine but why I'm facing [Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined" type error.
My Vue File
<template>
<p>Sold By: {{product.user.name}}</p>
</template>
<script>
export default {
data(){
return {
product:{},
}
},
methods: {
loadData(){
axios.get('/api/'+this.$route.params.slug+'/product')
.then(response => {
this.product = response.data;
},
()=> {});
}
},
created(){
this.$Progress.start();
this.loadData();
this.$Progress.finish();
},
}
</script>
My Controller
public function getProduct($slug)
{
$product = Product::where('slug',$slug)->with('brand','category','subCategory','productImages','featureDescriptions','colors','variants','user')->first();
return response()->json($product, 200);
}
``
Now I want to show my User name in Vue file <p>Sold By: {{product.user.name}}</p>. It showing User Name With an error [Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined". when I show the user data <p>Sold By: {{product.user}}</p>, It show user all data without error. Now how i show user name without error.
The error is self-explanatory: you're using {{product.user.name}} in the template. But before the product has returned from BE, product.user is undefined and therefore does not have a .name property.
The simplest fix would be to place a v-if on the <p>:
<p v-if="product.user">Sold By: {{product.user.name}}</p>
Another generic solution for this type of problem is to use a computed:
<template>
<p>Sold By: {{productUserName}}</p>
</template>
<script>
export default {
// ...
computed: {
productUserName() {
return this.product.user?.name || '';
}
}
// ...
}
</script>
You can read more about optional chaining operator (used above) (?.) here.
Because it's a fairly new addition to JavaScript, Vue doesn't currently support it in <template> tags (but it works in <script>).
Additional note: a common mistake is to add an additional data member instead of using the source of the error (product.user in this case) either directly or through a computed. This creates two problems:
it decouples product.user from rendering the <p>. Which means that if BE returns a product without a user, you'll still get the error, because you've set dataLoaded to true but the template still tries to read the property .name of user, which is falsy and therefore does not have a .name.
you create unnecessary boilerplate: anyone trying to understand or modify your code at a later time has to figure out the arbitrary connection between dataLoaded and product.user.
One of the reasons Vue is loved for is because it doesn't require boilerplate code, unlike other frameworks (i.e: Angular). Keep it that way! By using v-if="product.user" in the template, someone reading that code will immediately understand the rendering logic, without having to look at the component code. Decreasing the time needed to figure out the code on a regular basis will greatly decrease the time needed to modify it, should you (or someone else) ever need to. This results into more flexible, more scalable code. Less bugs, less time spent => more money.
This is happening because <p> is being rendered while product is still an empty object (product: {}).
You could use v-if to render only if product already has been loaded.
<template>
<p v-if="dataLoaded">Sold By: {{ product.user.name }}</p>
</template>
<script>
export default {
data() {
return {
product: {},
dataLoaded: false,
};
},
methods: {
loadData() {
axios.get("/api/" + this.$route.params.slug + "/product").then(
(response) => {
this.product = response.data;
this.dataLoaded = true;
},
() => {}
);
},
},
created() {
this.$Progress.start();
this.loadData();
this.$Progress.finish();
},
};
</script>
ScrollIntoView returns undefined
I am trying to scroll into the element when navigate to that page:
scrollTo(itemId) {
this.$refs['item' + itemId].scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'nearest',
})
},
The point is that it's getting called inside the mounted hook. ref is defined itemId is also defined which is a query parameter from vue router but it still throws
error in a mounted hook (Promise/async): "TypeError: Cannot read property 'scrollIntoView' of undefined"
What is wrong and how can be it fixed?
It seems that dynamic refs are not ready in mounted hook, so try to watch the $route object and scroll to the desired element :
watch:{
$route:{
handler(to,from){
if(to.query.itemId){
this.scrollTo(to.query.itemId)
},
deep:true //because $route is an object
}
}
}
But I think that you should use something like scroll-behavior
I am trying to get ag-grid row data for editing in a modal window.
during render vue throughs the bellow error.
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'data' of undefined"
my code. This is the mounted method.
mounted() {
this.leadsData = JSON.parse(JSON.stringify(this.params.data))
},
this.params must be a variable present in the data function,
otherwise, if you look for a property in the url you can use
this.$route.params.data or this.$route.query.data