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.
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;
}
}
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 )
}
I am using the modules mode of the store and in my projects.js inside my store folder I have:
export const getters = {
loadedProjects(state) {
return state.loadedProjects;
}
}
now in my computed how should I call it?
I’m trying like that:
computed: {
loadedProjects() {
return this.$store.getters.projects.loadedProjects;
},
}
but I get this error:
Cannot read property ‘loadedProjects’ of undefined
I had the same problem, if you are using the modules mode you can call your getters like that (in your case): this.$store.getters['projects/loadedProjects'];
So try to change your computed like that:
computed: {
loadedProjects() {
return this.$store.getters['projects/loadedProjects'];
},
}
You have to call your getter like this:
loadedProjects() {
return this.$store.getters['projects/loadedProjects'];
}
$store.getters['moduleName/getterName']
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.