Utilizing Vuex, is it possible to filter an array by incorporating another array in a Javascript view?

When using VueX, I am attempting to filter my "ListJobs" array based on the currentTag. Essentially, I want to return elements that match any of the values in the currentTag array with the rows role, level, languages, and tools.

   state: [
      listJobs: [
      {
        "id": 1,
        "company": "Photosnap",
        "role": "Frontend",
        "level": "Senior",
        "languages": ["HTML", "CSS", "JavaScript"],
      },
      {
        "id": 2,
        "company": "Manage",
        "role": "Frontend",
        "level": "Senior",
        "languages": ["HTML", "CSS", "JavaScript"],
      },
      {
        "id": 3,
        "company": "Account",
        "role": "Frontend",
        "level": "Senior",
        "languages": ["HTML", "CSS", "JavaScript"],
      },
    ],
    currentTag: [],

I attempted a solution like this, which currently only works for the Role line. My goal is for it to work for all fields.

  getters: {
    getJobs(state) {
      if (state.currentTag.length > 0) {
        return state.listJobs.filter(job => job['role'].includes(state.currentTag))

      } else {
        return state.listJobs
      }
    }
  },
javascriptvue.jsfiltervuexstore

Answer №1

Using .some can simplify the process.

  data: {
    fetchData(state) {
        return state.jobs.filter(job => state.tags.some(tag => tag === job.position))
    }
  },

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

Angular: Defining variables using let and var

When working with TypeScript and JavaScript, we typically use either let or var to declare a variable. However, in Angular components, we do not use them even though Angular itself uses TypeScript. For instance, export class ProductComponent implements OnI ...

javascriptangulartypescriptoop

Is it possible to employ getBoundingClientRect() for several elements sharing the same class?

I'm in the process of implementing sticky navigation on my website that will dynamically change as users scroll through different sections. Specifically, when scrolling over a section marked with the class .dark, I want the logo and text color to swit ...

javascripthtmlcss

Tips for restricting additional input when maximum length is reached in an Angular app

In my Angular 6 application, I am working on implementing a directive that prevents users from typing additional characters in an input field. However, I want to allow certain non-data input keys such as tab, delete, and backspace. Currently, I have an if ...

javascripthtmlangulartypescript

What is the best way to dynamically load a view within a modal based on the clicked link?

I'm looking to optimize the loading of views inside a modal for various operations. Instead of having three separate modals, I want to dynamically load the views based on the link that is clicked. How can I achieve this? Or should I create individual ...

javascriptphpjquerymodal-dialog

I aim to display interconnected information from various APIs in a cohesive manner

I am working with two APIs: component.ts ngOnInit(): void { this.getQueryCountriesList().subscribe(arg => { this.countryDatas = arg; }); this.getQueryNights().subscribe(obj => { this.nightDatas = obj; }); ...

javascriptangulartypescriptapi

Showing different HTML elements based on the link that is clicked

Recently, I delved into the world of web development and decided to test my skills by creating a basic webpage with an interactive top navigation bar. Depending on the link clicked, specific HTML elements would be displayed while turning off others using a ...

javascripthtmlcss

JavaScript OOP problem with object instances

I'm currently working on developing an app in JavaScript and trying to grasp the concept of Object-Oriented Programming. I created a simple "class" where I set an empty array in its prototype. However, when I create objects from this class and pass va ...

javascriptjquery

When items are removed client-side, the Listbox becomes null

Given a Web Forms project inherited by me, I am relatively new to the field of Web development. The page in question features 2 listboxes: lstCaseLoad, containing "Caseloads" (ID numbers), and lstAssignedCaseLoad, filled with Caseloads chosen by the Form U ...

javascriptc#asp.netwebformslistbox

Utilize the Magento extension to seamlessly integrate JavaScript code into the head section of your website

I am attempting to incorporate JavaScript code into all or some pages of my website using an extension. I require a dynamic version (hosted in a .phtml file) of the following script: <default> <reference name="head"> & ...

javascriptphpxmlmagentotemplates

SignalR server with Redis backplane for horizontal scaling is experiencing issues with proper functionality on the Vue front end

Seeking Appreciation for Providing Answers! I have developed a SignalR backend server using .NET Core 3.1 running on Docker (Debian). Initially, it functions properly when I deploy a single server on Kubernetes. However, as soon as I scale up the replicas ...

c#vue.jswebsocketsignalr

Tips for preventing multiple counter buttons from conflicting with one another

Currently, I am in the process of creating an online restaurant platform that allows customers to place food orders. To streamline this process, I am developing individual cards for each food item available on the menu. In addition, I am implementing butto ...

javascripthtmldom

Integrating additional information (HTML) into current content utilizing Vue JS data structures

I am attempting to use Vue JS to load content onto a page. The user interface consists of a select element, a textarea, and a button. I want to display data from a third-party API response on the page. The first item loads successfully, but subsequent item ...

javascripthtmlvue.js

Vue defineProps allows for the definition of complex types for properties

Within my code, I am exploring the use of complex prop types in certain instances. Below is an example of what I have in mind: enum Country { [...] } interface IPerson { firstname: string; lastname: string; } interface IAddress { street: string; ...

typescriptvue.jsvuejs3vue-composition-apivue-script-setup

Guide to generating an array entry for every line of a text file in node.js

Struggling with converting each line of a text file into an array entry in node.js The array I am working with is named "temp." The code below successfully prints out each line: var temp = []; const readline = require('readline'); const fs = re ...

javascriptnode.jstext

What steps are required when utilizing ngModelOptions allowInvalid = true in AngularJS?

As a newcomer to AngularJS, I am currently navigating a complex form and it seems like incorporating the ngModelOptions { allowInvalid: true } option could prove beneficial. I can only assume that AngularJS's default behavior of discarding the model ...

javascriptangularjs

I encountered a problem while trying to incorporate the solution that prompts another button click event

Interesting topic: JQuery / JavaScript - triggering button click event from another button <input type="submit" name="savebutton" id="uniqueOne" /> <input type="submit" name="savebutton" id="uniqueTwo" /> I have implemented a feature on my si ...

phpjavascriptjquery

Adding data to a JSON object using AngularJS

When attempting to insert an object into a JSON object, I am encountering an issue where it duplicates the JSON object. Here is a breakdown of the scenario: <input type="text" style="width: 40% !important;" placeholder="Nom" class="input-sm" ng-model= ...

javascriptangularjsjson

Obtaining data from an external ng-repeat element

My list contains items that are being repeated using ng-repeat details. I want to be able to hover over one of the li elements and have the background of a div called background (which is outside of the ng-repeat) change to the url of the corresponding d ...

javascriptjqueryhtmlcssangularjs

Iterate through a directory on the local machine and generate elements dynamically

I am looking to create a jQuery-UI tabs menu that includes 54 images on each tab. I have a total of 880 images stored in a folder, and it would be very time-consuming to manually insert an <img> tag for each one. Is there a way to dynamically cycle t ...

javascriptjqueryhtmlcssdirectory

The Vue.js input for checkboxes and radios fails to toggle when both :checked and @input or @click are used simultaneously

Check out this example on JSFiddle! <script src="https://unpkg.com/vue"></script> <div id="app"> <label> <input type="checkbox" name="demo" :checked="isChecked" @input=" ...

javascriptvue.jsfrontend