I used in mapGetters for get param from store,
computed: {
...mapGetters("agent",["getConfig"]),
}
It is working well, But it do error:
[Vue warn]: Computed property "getConfig" was assigned to but it has no setter.
I tried do it with Get and Set:
computed: {
getConfig: {
get: () => this.$state.getters.getConfig,
set: (value) => this.$state.commit('setConfiguration', value ) }}
But I have error:
vue.runtime.esm.js:620 [Vue warn]: Error in getter for watcher "getConfig": "TypeError: Cannot read property '$state' of undefined"
What is the correct syntax to make Get and Set for "GetConfig" in computed?
The context of this is lost in arrow functions.
So just change to:
get: function() {
return this.$state.getters.getConfig
},
set: function(value) {
this.$state.commit('setConfiguration', value )
}
Related
I want to traslate the text, i have this code:
title: {
type: String,
default: function () {
return this.$t("basic.confirm")
}
},
i am getting this error:
vue.common.dev.js?4650:630 [Vue warn]: Error in nextTick: "TypeError: Cannot read property '$t' of undefined"
But when i used in the template, worked fine:
{{$t("basic.confirm")}}
Props are validated before the component instance is created. Therefore "this" keyword is not available at the moment you're attempting to use it, since "this" does not exist yet.
What you can do though is create a computed variable which actually translates the prop and then use it in your template or wherever you want to. Here's the pseudocode:
computed: {
computedTitle: function () {
// Prop fallback value.
if (!this.title) {
return this.$t('basic.confirm');
}
// Actual prop value.
return this.title;
}
}
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;
}
}
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've just read and apply the documentation about Two-way Computed Property
, but the compiler says that it is a syntax error.
This is my sample snippet:
computed: {
message: {
get () {
return this.$store.state.obj.message
},
set (value) {
this.$store.commit('updateMessage', value)
}
}
}
Actually i only have wrong interpretation in computed property in vue.
I call my computed property as:
message() {
get () {
return this.$store.state.obj.message
},
The computed property named message was called as a function.
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.