How to pass asynchronous values from display to method - Vue?
The return is an error indicating that the function does not exist.
Where can I be wrong?
Thank you guys
methods: {
teste (value) {
console.log(value)
}
},
display: function () {
this.teste(true)
}
[Vue warn]: Error in render: "TypeError: _this2.teste is not a
function"
Why you would need to add a display function at the component level? You should not have functions outside of methods object, for a component. Because these are not part of Vue components conception.
methods: {
teste (value) {
console.log(value)
},
display: function () {
this.teste(true)
}
}
Related
I am trying to fill an array, declared in data property, by calling a function in methods property in Vue js. Here is the code:
<script>
export default {
extends: Bar,
mounted() {
this.renderChart(this.chartData, this.options);
this.fillLabel();
},
data() {
return {
chartData: {
labels:[],
datasets: [
{
label: "Users",
data: [40,20,12,39,10,40]
}
]
},
};
},
methods: {
fillLabel() {
this.chartData.datasets[0].data.map(function (key,value) {
this.chartData.labels.push(key);
})
}
}
};
</script>
But this gives me following error in console :
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'chartData' of undefined"
So how can I fill the labels array(inside chatData) by 0 to length of data array(inside datasets).
I am looking for your help. Thanks in advance.
This is due to the fact that your function inside your map function will loose the this context. and so its getting undefined.
to solve this problem use an arrow function inside your map.
this.chartData.datasets[0].data.map((key,value)=> {
this.chartData.labels.push(key);
})
this will solve the problem
Only need to introduce this to your fillLabel method as below:
I tried this solution nd it fixed the problem
fillLabel() {
let th = this;
th.chartData.datasets[0].data.map(function (key,value) {
th.chartData.labels.push(key);
})
alert(th.chartData.labels)
},
Code below yields error "Cannot read property 'form' of undefined":
computed: {
boundary_limits () {
return this.$refs.hemoBoundaryLimits.form;
},
high_risk_alerts () {
return this.$refs.highRiskAlerts.form;
},
alerts () {
return {
boundary_limits: this.boundary_limits,
high_risk_alerts: this.high_risk_alerts
}
}
}
Yet if I removed alerts(), I get no error and I can even console log boundary_limits or high_risk_alerts
successfully, which means $refs.hemoBoundaryLimits and this.$refs.highRiskAlerts are defined.
So Vue.js has a problem with how I define alerts, but I see no problem in it.
Any clue what's going on?
The error comes because you are trying to access $refs in computed property.
Computed properties are evaluated before the template is mounted and thus the hemoBoundaryLimits is undefined.
You should access $refs in the mounted hook.
As solution, you can trick it by knowing when the component is mounted using #hook event:
<hemoBoundaryLimits #hook:mounted="isHemoBoundaryLimitsMounted = true" />
And in the script
data: () => ({
isHemoBoundaryLimitsMounted: false
}),
computed: {
boundary_limits () {
if (!this.isHemoBoundaryLimitsMounted) return
return this.$refs.hemoBoundaryLimits.form;
}
}
Inside component A I have a watch object like this:
watch: {
delete_todo_object: {
handler(object) {
if (object.error) {
this.showSnackBar({
text: `Could\'nt delete task. Reason: ${object.error}`,
color: "error",
close_button_text: "Close",
close_button_function: () => hideSnackBar()
});
}
},
deep: true
},
and a function like this:
methods: {
hideSnackBar() {
this.$store.commit("notifications/hideSnackBar");
},
close_button_function is correctly finding the hideSnackBar function I have inside component A and passing it along to my vuex module. Component B has a computed property that returns the same object stored in the store.
computed: {
snackbar_object () {
return this.$store.state.notifications.snackbar;
}
},
However, when component B tries to use the function, it says "hideSnackBar is not defined".
<v-btn
color="primary"
flat
#click="snackbar_object.close_button_function"
>
I checked and made sure the function is being sent along to my vuex store and assigned to the right object property there.
Is what I'm trying to do not possible?
You call hideSnackBar as if it exists in showSnackBar context.
close_button_function: () => hideSnackBar()
Please, try
close_button_function: () => this.hideSnackBar()
I have a normal single file component which has both a computed property and some methods:
<template>...</template>
<script>
...
export default {
props: ['matches'],
data: function() {...} // No problem with these
computed: {
formattedMatches: function () {
let formatted = [];
this.matches.forEach(function($match, $i, $arr) {
formatted[$i] = $match[0];
};
});
return formatted;
}
...
methods: {
getData: function() {
return this.formattedMatches();
},
...
}
}
<script>
When I try to access this.formattedMatches() from the method, I get a [Vue warn]: Error in render: "TypeError: this.formattedMatches is not a function"
.
What is the correct way to achieve what I want?
Thanks in advance.
You can access computed properties like a property, not like a method:
// correct
console.log(this.myProperty);
// wrong
console.log(this.myProperty());
Note: If you treat it as a method with paracentesis () it shall throw an error like this Error in v-on handler: "TypeError: this.myProperty is not a function".
I have given
isWeb: function () {
return isWebOnly;
}
in computed properties.
Now I HAVE TO USE isWeb() in the methods section
isQuickViewEnabled (
{ userData }: {userData: AlgoliaUserData[] | undefined }): boolean {
if (Array.isArray(userData)) {
const quickViewEnabled = userData[0]?.quick_view_enabled;
return this.**isWeb** && quickViewEnabled;
}
return false;
},
But its giving Property 'isWeb' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<{ product: any; position: number; results: any; cornerFlagsRules: CornerFlags[]; }>>'.
I have a computed Vue function that has a parameter. Every time I try to bind it to the click, I receive and error Error in event handler for "click": "TypeError: searchHashtag is not a function"
Here's the HTML:
<el-button #click="searchHashtag('#acc')">Test</el-button>
And here's the logic:
data () {
messages: []
},
mounted () {
api.fetchMessages( this.projectId, ( data ) => {
this.messages = data.messages;
},
computed: {
searchHashtag (searchBy) {
if (_.contains(this.messages, searchBy))
this.$message('This is a message.');
}
}
You want a method, not a computed property.
methods: {
searchHashtag (searchBy) {
if (_.contains(this.messages, searchBy))
this.$message('This is a message.');
}
}
Computed properties cannot be called like a function. They act like properties of the Vue and do not take arguments. When you need a function that accepts arguments, always use a method.