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.
Related
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()
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)
}
}
I'm creating a component with Vue.js.
When I reference this in any of the the lifecycle hooks (created, mounted, updated, etc.) it evaluates to undefined:
mounted: () => {
console.log(this); // logs "undefined"
},
The same thing is also happening inside my computed properties:
computed: {
foo: () => {
return this.bar + 1;
}
}
I get the following error:
Uncaught TypeError: Cannot read property 'bar' of undefined
Why is this evaluating to undefined in these cases?
Both of those examples use an arrow function () => { }, which binds this to a context different from the Vue instance.
As per the documentation:
Don’t use arrow functions on an instance property or callback (e.g. vm.$watch('a', newVal => this.myMethod())). As arrow functions are bound to the parent context, this will not be the Vue instance as you’d expect and this.myMethod will be undefined.
In order to get the correct reference to this as the Vue instance, use a regular function:
mounted: function () {
console.log(this);
}
Alternatively, you can also use the ECMAScript 5 shorthand for a function:
mounted() {
console.log(this);
}
You are using arrow functions.
The Vue Documentation clearly states not to use arrow functions on a property or callback.
Unlike a regular function, an arrow function does not bind this. Instead, this is bound lexically (i.e. this keeps its meaning from its original context).
var instance = new Vue({
el:'#instance',
data:{
valueOfThis:null
},
created: ()=>{
console.log(this)
}
});
This logs the following object in the console:
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
Whereas... If we use a regular function (which we should on a Vue instance)
var instance = new Vue({
el:'#instance',
data:{
valueOfThis:null
},
created: function(){
console.log(this)
}
});
Logs the following object in the console:
hn {_uid: 0, _isVue: true, $options: {…}, _renderProxy: hn, _self: hn, …}
If you want to keep using the arrow function, you could pass the component instance (this) as parameter like :
computed: {
foo: (vm) => { //vm refers to this
return vm.bar + 1;
}
}
you cannot use the arrow funtion if you want to use the this. Because the arrow funtion doesn't bind this.
I'm creating a component with Vue.js.
When I reference this in any of the the lifecycle hooks (created, mounted, updated, etc.) it evaluates to undefined:
mounted: () => {
console.log(this); // logs "undefined"
},
The same thing is also happening inside my computed properties:
computed: {
foo: () => {
return this.bar + 1;
}
}
I get the following error:
Uncaught TypeError: Cannot read property 'bar' of undefined
Why is this evaluating to undefined in these cases?
Both of those examples use an arrow function () => { }, which binds this to a context different from the Vue instance.
As per the documentation:
Don’t use arrow functions on an instance property or callback (e.g. vm.$watch('a', newVal => this.myMethod())). As arrow functions are bound to the parent context, this will not be the Vue instance as you’d expect and this.myMethod will be undefined.
In order to get the correct reference to this as the Vue instance, use a regular function:
mounted: function () {
console.log(this);
}
Alternatively, you can also use the ECMAScript 5 shorthand for a function:
mounted() {
console.log(this);
}
You are using arrow functions.
The Vue Documentation clearly states not to use arrow functions on a property or callback.
Unlike a regular function, an arrow function does not bind this. Instead, this is bound lexically (i.e. this keeps its meaning from its original context).
var instance = new Vue({
el:'#instance',
data:{
valueOfThis:null
},
created: ()=>{
console.log(this)
}
});
This logs the following object in the console:
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
Whereas... If we use a regular function (which we should on a Vue instance)
var instance = new Vue({
el:'#instance',
data:{
valueOfThis:null
},
created: function(){
console.log(this)
}
});
Logs the following object in the console:
hn {_uid: 0, _isVue: true, $options: {…}, _renderProxy: hn, _self: hn, …}
If you want to keep using the arrow function, you could pass the component instance (this) as parameter like :
computed: {
foo: (vm) => { //vm refers to this
return vm.bar + 1;
}
}
you cannot use the arrow funtion if you want to use the this. Because the arrow funtion doesn't bind this.