Vue.js: The Power of Manipulating Strings

Question

Vue.js: The Power of Manipulating Strings

Why is the filter method not working with this.userId, but it is working with the hard-coded value "admin"? How can I resolve this issue?

computed: {
    UidMessages: function() {
       return this.Messages.filter(function(m) {
         return m.to == this.userId;
     })
   }
 },

The code that is currently working:

computed: {    
   AMesseg: function() {
     return this.Messages.filter(function(m) {
       return m.to== "admin";
     })
   }
},

I suspect the problem lies in the comparison of strings.

Thank you.

javascript vue.js

Answer 1

Answer №1

The reason for this issue being undefined is due to the lack of binding to your fn function. Try using arrow syntax in order to establish lexical binding of this to the fn function, which should resolve the problem.

 computed: {
    UidMessages: function() {
       return this.Messages.filter(m => {
         return m.to == this.userId
     })
   }
  },

Answer 2

The reason for this issue being undefined is due to the lack of binding to your fn function. Try using arrow syntax in order to establish lexical binding of this to the fn function, which should resolve the problem.

 computed: {
    UidMessages: function() {
       return this.Messages.filter(m => {
         return m.to == this.userId
     })
   }
  },

Answer 3

Answer №2

You have the option to utilize an arrow function as explained in the answer provided by @Satyam Pathak, or you can define an object outside of this.Messages.filter and use that object in the condition, like this:

computed: {
  UidMessages: function() {
     let userId = this.userId;    // declare and assign userId value.
     return this.Messages.filter(function(m) {
       return m.to == userId;     // use userId variable for condition.
   });
 }
}

P.S. Check out How does the "this" keyword work? for more detailed explanations.

Answer 4

You have the option to utilize an arrow function as explained in the answer provided by @Satyam Pathak, or you can define an object outside of this.Messages.filter and use that object in the condition, like this:

computed: {
  UidMessages: function() {
     let userId = this.userId;    // declare and assign userId value.
     return this.Messages.filter(function(m) {
       return m.to == userId;     // use userId variable for condition.
   });
 }
}

P.S. Check out How does the "this" keyword work? for more detailed explanations.

Vue.js: The Power of Manipulating Strings

Answer №1

Answer №2

Similar questions

Is there a way to calculate the total of three input values and display it within a span using either JavaScript or jQuery?

Ways to show alternative data from a database in Laravel 8

Is it possible to transfer a value when navigating to the next component using this.props.history.push("/next Component")?

How can I effectively refresh the provider_token / access token for Discord in NextJS with Supabase Auth?

Identifying activity on a handheld device

Only initiate an AJAX call if there are no other pending AJAX requests from prior function invocations

Set up webpack on your Mac using npm

The Protractor tool (node:9208) threw an UnhandledPromiseRejectionWarning due to an ElementNotVisibleError, indicating that the element is not interactable. Despite this

My div does not refresh when using .load

Utilizing V-If and V-Else for Data Value Interpolation - A Guide

Unlocking the mysteries of State and Getters in Nuxt.js: Getters are failing to function

Converting MSK time to SST time using JavaScript: A Handy Guide

Looking to set up an event listener for a customized checkbox in a Kendo UI Grid column with Vue Js?

JSP form continues to submit despite JavaScript validation returning false

Display different text based on the property value

Customized style sheets created from JSON data for individual elements

Store the numeric value in JavaScript as a PHP integer

Please indicate the decimal separator for the Number() function

PHP Calculator - Displaying results in both the webpage and an Ajax popup for enhanced user experience

The website code lacks a dynamically generated <div> element