Just starting out with Vue and hitting a roadblock with global variables

I am currently working on creating a filtered list in Native Vue, specifically compiling and running it for Android.

export default {
  components: { card },
  data:
  { 
    search: 'An', 
    level: "", 
  },
  computed: {
    searchInLowerCase() 
    {
      return this.search.toLowerCase().trim().toString();
    },
    filteredList()
    {
      return cards.filter((el) =>
      {
        return el.Name.toLowerCase().includes("an"); //this one works
        return el.Name.toLowerCase().includes(this.searchInLowerCase); // This doesn't work
        return el.Name.toLowerCase().includes(this.search);//same
      })
    }

The issue I'm facing is that the "this variable" works under the filteredList function but not under the short-hand filter function. In this function, the "This" variables are undefined. Can anyone help me understand what mistake I might be making?

Thank you in advance, Erik

Answer №1

The reason for the issue is that you are currently in a different scope. However, it is possible to maintain a reference to this.

filteredList() {
  const vm = this; // replaceable with any preferred name
  return cards.filter((el) => // <-- Your `this`-scope breaks here
  {
    return el.Name.toLowerCase().includes("an"); // this line works fine
    return el.Name.toLowerCase().includes(vm.searchInLowerCase); <-- use reference here
    return el.Name.toLowerCase().includes(vm.search); <-- also here
  })
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for enabling mouse wheel zoom on a three.js scene

I have a straightforward three.js graphic that I wanted to make zoomable by using the mouse wheel. I attempted to implement solutions from this and this question in order to achieve this feature. Ideally, I want users to be able to zoom in or out of the gr ...

jQuery - delete a single word that is case-sensitive

Is there a way to eliminate a specific case-sensitive word from a fully loaded webpage? The word in question is "Posts" and it appears within a div called #pd_top_rated_holder that is generated by Javascript. The Javascript code is sourced externally, so ...

In my coding project using Angular and Typescript, I am currently faced with the task of searching for a particular value within

I am facing an issue where I need to locate a value within an array of arrays, but the .find method is returning undefined. import { Component, OnInit } from '@angular/core'; import * as XLSX from 'xlsx'; import { ExcelSheetsService } f ...

Utilize data binding in Typescript to easily link variables between a service and controller for seamless utilization

Is there a way to overcome the issue of value assignment not binding data in this scenario? For example, using this.arrayVal = someService.arrayVal does not work as intended. The objective is to simplify the assignment in both HTML and controller by using ...

Utilizing SubscribeOn does not impact the behavior of Subjects

Based on my understanding, The SubscribeOn operator specifies the specific Thread in which the Observable source should start emitting. If there are multiple SubscribeOn operators in a chain, only the first one will take effect for the entire flow. The ...

The text of the keyword in AdGroupCriterionService remains unchanged

I've been utilizing the GoogleAds Node Module from https://www.npmjs.com/package/googleads-node-lib. I have successfully managed to modify the Tracking Template and the CpcBid microAmount, however, I am facing an issue with changing the keyword text. ...

I am encountering issues with my PostCSS plugin not functioning properly within a Vue-cli 3 project

I developed a custom postcss plugin that was working perfectly according to the postcss guidelines until I tried to implement it in a real project. For reference, here's the plugin on GitHub My goal is to integrate it into a Vue-cli app using Webpac ...

Step by step guide on how to incorporate bootstrap.js, jQuery, and additional modules into an Angular2 application utilizing SystemJS

Struggling with loading and using downloaded node_modules in angular2, npm, and systemjs? Specifically, trying to load jQuery and bootstrap but encountering errors after modifying the systemjs setup. Let's solve this together... Error Messages: (i ...

Implementing the expand and collapse functionality to the Discovery sidebar on the DSpace 4.2 xmlui platform

I recently began using DSpace and I am attempting to implement an expand/collapse feature in the Discovery sidebar of DSpace 4.2 xmlui using the Mirage theme. After finding some helpful jquery code, I attempted to add this functionality by placing the js f ...

Vue appears to be having trouble waiting for the axios Post request

While testing a login request, I encountered an issue where jest did not call the mock: This is my test : const User = '123123' jest.mock('axios', () => ({ get: jest.fn(), post: (_url, _body) => new Promise((resolve, reject ...

Stop the execution of the JavaScript function when clicked

Greetings, as a newcomer to the realm of JavaScript and AJAX, I am seeking assistance with a specific function on this page. The concept revolves around triggering different JavaScript functions based on user interaction with an image map. Initially, when ...

Incorporating .json files into an HTML template with the help of an HTML form designed for selecting a particular

I am faced with a collection of various .json files that I wish to specify by name on an HTML page (local) form, enabling me to load this data onto a table. This is how my HTML form appears: <form> File: <input type="text" Id="file_name"&g ...

NextRouter does not have a property called "refresh"

Here is the provided code snippet: "use client"; import { useRouter } from "next/router"; import { useState } from "react"; export default function CreatePrompt() { const [title, setTitle] = useState(""); const ...

Encountered an error while trying to process Debug Google Services task in React Native after modifying app name

I recently altered the name of my application using react-native-rename, which worked seamlessly. However, I encountered an error afterwards: Execution failed for task ':app:processDebugGoogleServices' > No matching client found for package n ...

Flutter upgrade to version 3.22.0 was unsuccessful in launching

After upgrading to 3.22.0 in Flutter, my app failed to run. I've already upgraded Gradle and Java17, but I'm getting an error message that mentions 'DecoderCallback' not found. Does anyone know which version of Gradle is supposed to be ...

Automate another website through the use of my own website

Apologies in advance if my English is not perfect. I have a website on Linux Ubuntu and I am looking to automate actions on different websites, allowing users to see the automation happen in a second browser tab. For example; A user clicks a button on my ...

npm audit consistently reports back with no vulnerabilities detected

Today, while working on my programming projects, I noticed something strange - every time I ran npm audit on my react projects, it would return 0 vulnerabilities. This was odd because earlier that day, one project had shown 8 vulnerabilities. I checked all ...

Resolving conflicting event handlers within vue.js

I have a situation where I'm trying to use two buttons on a page to navigate to different sections. When I include only one button, everything works fine. But when I include both buttons, only one of them functions properly. Upon debugging, I noticed ...

Setting the default type of an array in props in Vue 2 is a common need for many developers

My Vue component relies on an array of objects as a prop and I always make use of prop validation, especially for setting default values. In this case, my current setup is: props: { items: Array } However, I would prefer it to resemble something lik ...

What is the best way to transfer a property-handling function to a container?

One of the main classes in my codebase is the ParentComponent export class ParentComponent extends React.Component<IParentComponentProps, any> { constructor(props: IParentComponent Props) { super(props); this.state = { shouldResetFoc ...