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

Making a Zoom effect using p5.js

I have searched for a solution to this question multiple times, but none of the answers I came across seem to work for me. Currently, I am able to allow the user to scale an image with a simple scale(factor) call. However, now I am attempting to implement ...

javascriptcanvasprocessingp5.js

Ways to incorporate a dictionary into your website's content

I am in the process of developing a website for educational purposes while also honing my web programming skills. On this website, I have encountered some complicated terms that may be difficult for users to understand, so I want to implement a tooltip/mod ...

javascripthtmlcssnode.jsjson

Is there a more efficient approach to extracting the border width using javascript?

I implemented the following code: const playGard = document.getElementsByClassName("playGard")[0]; const borderW = getComputedStyle(playGard,null).getPropertyValue('border-left-width').substr(0,2); The result I obtained was "10". Is there a m ...

javascriptcssgetcomputedstyle

jqRangeSlider experiencing performance issues in Chrome browser

Utilizing the jqRangeSlider on my website has been quite challenging. Strangely, when creating multiple instances of the slider, there is a significant delay in rendering on Google Chrome specifically (approximately 1.5-2 seconds for each slider out of 9). ...

javascriptjquery

Css shaky letters transformation

[SOLUTION] To resolve this issue, you can utilize the will-change CSS property that enforces GPU rendering: will-change: transform; [ORIGINAL QUESTION] After extensive searching on the internet, I have yet to find a solution to a seemingly simple prob ...

javascriptcsstransformjittertranslate3d

Material UI TreeView: Organize and present node data with multiple columns in a tree structure

const treeItems = [ { id: 1, name: 'English', country: 'US', children: [ { id: 4, name: 'Spring', country: 'Uk', ...

javascriptreactjstypescriptmaterial-uitreeview

ways to conceal icon image when the textbox is devoid of content

Is there a way to hide the clear icon from a text box if the length inside the text box is less than 1? I attempted the following code, but it didn't work for me. The inner icon is not hidden when the input field length is less than 1. For a demo ex ...

javascriptjquery

Despite the values being visible in the console, the array in the object from the database is mysteriously undefined in Vue.js

My goal is to retrieve data from a database and display it on the screen. I successfully retrieved the data using axios and used forEach to loop through arrays inside the data. mounted(){ axios.get('/api/tree').then(Response => { ...

vue.js

Extract the sub-element within a parent element using Vue event handling

Objective The main aim is to add a class to the dropdown element .menu-item-dropdown whenever the user clicks on the .menu-item element. Issue Currently, when clicking on the .menu-item element, the returned value from the console.log inside the showMob ...

javascriptvue.js

Leveraging Polymer web components without the need for a package manager

I am looking to incorporate web components into a static web page without the need for any package manager or JavaScript build process. After referencing , I attempted to import them using unpkg by changing <script type="module" src="node_modules/@pol ...

javascripthtmlpolymerweb-component

Incorporating a personalized image to create custom icons on the Material UI bottom navigation bar

Is it possible to replace the default icon with a custom image in material ui's BottomNavigation component? I'm curious if Material UI supports this feature. If you'd like to take a closer look, here is the link to the codesandbox. ...

javascriptreactjsmaterial-ui

Node.js: Leveraging Express to Compare URL Parameters and Handle Delete Requests with Array Values

Having some issues with the Express routes I set up for an array of objects and CRUD operations. Everything works smoothly except for the "Delete" operation. I am trying to delete an object by matching its URL parameter ID with the value of its key. Howev ...

javascriptnode.jsexpressbody-parser

Refresh the page before the conclusion of the express-Node js function

I am encountering an issue with a function that functions properly with small files but fails when dealing with large files. The problem occurs when the axios post request in Express JS ends, causing a page refresh. I am using React JS on the client side a ...

javascriptnode.jsreactjsexpressaxios

How to initiate a refresh in a React.js component?

I created a basic todo app using React, TypeScript, and Node. Below is the main component: import * as React from "react" import {forwardRef, useCallback, useEffect} from "react" import {ITodo} from "../types/type.todo" import ...

javascriptnode.jsreactjstypescript

Tips for detecting when a browser is closing in a web application that is integrated with a master page

Currently, I am working on a web application that uses a master page. I need to be able to detect when the user is closing the browser so that I can raise an event to clean up session variables. I attempted using the unload JavaScript event, but it seems ...

asp.netjavascript

Refresh your webpage with new content and modified URLs without the need to reload using window.history.pushState

Hey everyone, I'm looking to incorporate window.history.pushState into my website, but I'm unsure of how to go about it... What I'm aiming for is to have a page dashboard.php and update the URL to dashboard.php?do=edit&who=me, while loa ...

javascriptphpjqueryhtmlajax

Echarts: scatter plots linked with a line to the axis (resembling the PACF diagram)

I am currently working with echarts (js). Is there a method to link the dot of the scatter plot with the 0 value on the y-axis? I want it to resemble a pacf plot, similar to this example: The desired outcome should look something like this: https://i.sta ...

javascriptlinescatter-plotecharts

Encountering issues while trying to establish a connection to MongoDB through JavaScript

I have developed a code for seamlessly integrating various social networking logins with nodejs. Below is my server.js file: // include the necessary tools var express = require('express'); var app = express(); var port = process.env ...

javascriptnode.jsmongodb

Failure of event watcher on dynamically updated content

Any help would be greatly appreciated! :) I am currently using JavaScript to dynamically add fields to a document, but I have noticed that the event listener only works on predefined fields. For instance, in the code snippet below, the 'lozfield&apo ...

javascripthtmljqueryinput

Looking for a way to automatically update a map within a Vue component

My component successfully: Receives a string from a sibling input component via the global Bus method in created() => works Manipulates the string into lat/lng coordinates via geoDecoding() => works Resolves promise result coordinates, sets data, a ...

javascriptvue.jsvuejs2vue-component