Vue allows you to use regular expressions with arrays

Looking to implement a list filtering system using checkboxes.

This is how I am looping through an array from VUEX:

<div class="checkbox" v-for="brand in brands" :key="brand.id">
   <input name="brands" type="checkbox" :value="brand.name" v-model="checkedBrand" />
   <label for="brands">{{brand.name}}</label>
</div>

Here is the function I am using:

filteredList() {
      if (this.checkedBrand.length > 0) {
        return this.shoes.filter(shoe => {
          return shoe.brand.match(
            new RegExp(
              this.checkedBrand.forEach(check => {
                return +check + "|";
              }),
              "g"
            )
          );
        });
      } else {
        return this.shoes;
      }
    }

I currently have the line: When it's new RegExp(checkedBrand[0]+'|'+checkedBrand[1], 'g'), but I want to avoid hardcoding that.

Answer №1

selectedItems() {
  if (this.selectedBrands.length > 0) {
    return this.items.filter(item => {
      return item.brand.match(
        new RegExp(
          this.selectedBrands.join('|'),
          "g"
        )
      );
    });
  } else {
    return this.items;
  }
}

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

The functionality of the Protractor right click feature is smooth, however, there seems to be an issue with selecting

https://i.sstatic.net/KoGto.png Even though I can locate the button within the context menu, I am facing difficulty in clicking it. The code mentioned below is successfully able to click the button, but an error message pops up indicating: Failed: script ...

Rotating elements with timed jQuery

I'm having trouble getting the selector to rotate at different intervals. I attempted using an if/else statement to make the first rotation occur after 3 seconds and subsequent rotations occur after 30 seconds. Unfortunately, it's rotating every ...

"When attempting to render a Node inside the render() method in React, the error message 'Objects are not valid as a React child' is

On my webpage, I have managed to display the following: export class OverworldComponent extends React.Component<OverworldComponentProps, {}> { render() { return <b>Hello, world!</b> } } However, instead of showing Hello, ...

The context of 'this' remains unestablished within the SFC Vue

I am facing a problem where, while hovering over the variable during debugging inside Chrome DevTools, I receive the following output: When checking the DevTools console: Does anyone have any idea why this is happening? It's really frustrating as it ...

Floating action button within a collapsible panel

I am having trouble placing a fixed-action-btn inside a collapsible body. It keeps appearing in the bottom right corner of the page instead of within the collapsible itself. How can I ensure that the button stays inside the body? Check out this link for r ...

Looking for assistance with finding a specific value in Firestore?

As I venture into using firestore for the first time, I'm in the process of creating a registration page with vue. One crucial step before adding a new user to the database is to validate if the provided username already exists. If it does not exist, ...

Creating packaging for a node-webkit application

https://github.com/rogerwang/node-webkit/wiki/How-to-package-and-distribute-your-apps When I was packaging my node-webkit application for Windows using the instructions provided in the above link, I encountered a challenge. I could not figure out how to p ...

eachSeries not executing the callback

I am encountering an issue with async.eachSeries. I am using it to loop through an array and download files using a specific function (refer to the source code provided). However, I am having trouble as the callback never seems to be called. Is there somet ...

Testing Vue.js components - monitoring changes to props

I'm currently facing an issue while trying to unit test a watcher on a prop within a Vue component using Karma+Jasmine. It appears that the watchers on props are not being triggered during the unit test. Let's take a look at a simple example com ...

The functionality of the Vueify modal seems to be malfunctioning when incorporating Vueify alongside a central Modal.vue file that houses modal templates

I've been experimenting with integrating this tutorial on creating reusable modal dialogs with Vuejs and adapting it for use with Vueify. Initially, I was able to successfully implement it, but after exploring a different approach briefly, I returned ...

Having trouble with javascript regex for date validation?

I am facing an issue with using JavaScript regex to validate date inputs. It is identifying valid dates as invalid, and I'm not sure what the problem is: /^([0-9]d{2})+(\.|-|\/)+([0-9]d{2})+(\.|-|\/)+([0-9]d{4})+$/ The date forma ...

The error callback encountered {"readyState":4,"status":200,"statusText":"success"} while processing

When I make a call to this url, the response is a JSON object when done directly in the browser. However, when I try to do it via ajax using the following code snippet: $.ajax({ url: url, type: "GET", dataType:"jsonp", succ ...

Finding and removing the last portion of the innerHTML can be achieved by employing specific techniques

Looking to manipulate a <div> element that includes both HTML elements and text? You're in luck. I need to locate and remove either the last, nth-from-last, or nth plain text section within it. For example: <div id="foo"> < ...

"Modify the color of a div element by changing it from the color name to the hexadecimal

Is there a way to use color codes instead of typical color names, like #e06666 for red? content.push('<p><div class="color red"></div>Whole Foods Market</p>'); Any suggestions on how to achieve this? ...

How can I manage the asynchronicity of Hapi.js, fs.readFile, fs.writeFile, and childProcess.exec?

My code execution seems to be resulting in an empty list, could it be that my asynchronous calls are incorrect? I've tried rearranging and breaking things into functions but there still seems to be a timing issue with my execution. The order in which ...

Is there a discrepancy in the JSON algorithm?

While using google chrome, I encountered the following scenario: I had an object in javascript that looked like this: var b = { text: 'hello world, you "cool"' }; I then used JSON.stringify to convert it to a string and sent it to the dat ...

Determine the moment at which the input is altered by adjusting the slider

I'm encountering an issue with making this work. My goal is to calculate input bmi_val whenever one of the other 2 inputs is modified. These inputs can be changed either directly by the user (entering a value into one of them) or through a jQuery sli ...

What is the best method for typing a component prop that is compatible with singular use and can also function within loops without disrupting intellisense?

The Scenario Within a heading component, I have defined various types as shown below: // Heading/index.d.ts import { HTMLAttributes } from 'react'; export const HeadingType: { product: 'product'; marketing: 'marketing'; ...

What is the proper way to call functions that are defined within my Vue.js plugins

Recently, I created a custom Vue.js plugin that allows access to Vue functions globally: const MyPlugin = { install (Vue, options) { Vue.myFunction = function () { console.log('Test') } } } export default { MyPlugin } To ...

The Ionic project compilation was unsuccessful

Issue: This module is defined using 'export =', and can only be utilized with a default import if the 'allowSyntheticDefaultImports' flag is enabled. Error found in the file: 1 import FormData from "form-data"; ~~~~~~~~ node ...