Is the Vuex mutation properly formatted?

Is the mutation method correctly written to modify the initial state array? I'm uncertain about the last few lines of the mutation method. What am I missing, if anything?

// Storing 

state: {
  flights: [
    {trip_class: 0, number_of_change="1"},
    {trip_class: 1, number_of_change="2"},
    {trip_class: 1, number_of_change="1"}...
  ]
}           // Expecting to filter the array

mutations: {
  setFilteredFlights: (state, data) => {
      // Flight classes
      if (...) {
        state.flights.filter(
          (flight) =>
            flight.trip_class === data.selectedFlightClass ||
            flight.number_of_changes === data.selectedChanges
        );
      }
      // Flight changes
      else if (...) {
        state.flights;                             // Unsure about this line of code
      }
    },
}

Answer №1

flights is the primary array containing flight objects. It would simplify things to use a getter (or multiple getters) to retrieve your filtered data, rather than altering the state.

getters: {
  getFlightsByTripClass: (state) => (tripClass) => {
    return state.flights.filter(flight => flight.trip_class === tripClass);
  }
}

To utilize this getter in your Vue component, you can access it using this.$store.getters:

computed: {
  filteredFlights() {
    return this.$store.getters.getFlightsByTripClass(1);
  }
}

Additionally, remember to adhere to camel case conventions for your variables. Use numberOfChange, instead of number_of_change.

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

Choose all elements with a specific class name without the need to specify their position in the list

I'm working on adding a function to my WordPress site that will allow me to show/hide page elements with a specific class. For example, I want any elements (such as rows, containers, and text blocks) that have the 'show-hide' class to be hid ...

Adding VueJS to the main div and content submitted by users

I am in the process of creating a compact guide website where users can submit articles related to a specific game. The website incorporates various components written in Javascript using VueJS. While most of the website is powered by Laravel and rendered ...

Issue: the module '@raruto/leaflet-elevation' does not include the expected export 'control' as imported under the alias 'L' . This results in an error message indicating the absence of exports within the module

Looking for guidance on adding a custom Leaflet package to my Angular application called "leaflet-elevation". The package can be found at: https://github.com/Raruto/leaflet-elevation I have attempted to integrate it by running the command: npm i @raruto/ ...

Encountered an issue following deployment to Heroku (Application error)

Introduction I recently created a Login form for my project. The frontend is deployed on Netlify at this link, and the backend is hosted on Heroku which can be accessed here. To view the backend logs, click here Here is a snippet of my index.js file: co ...

The functionality of getAttribute has changed in Firefox 3.5 and IE8, no longer behaving as it did before

Creating a JavaScript function to locate an anchor in a page (specifically with, not an id) and then going through its parent elements until finding one that contains a specified class. The code below works perfectly in Firefox 3.0 but encounters issues wi ...

Concealing and Revealing a Div Element in HTML

Every time the page is refreshed, I am encountering a strange issue where I need to double click a button in order to hide a block. Below is the code snippet for reference: <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

Explore RxJs DistinctUntilChanged for Deep Object Comparison

I have a scenario where I need to avoid redundant computations if the subscription emits the same object. this.stateObject$ .pipe(distinctUntilChanged((obj1, obj2) => JSON.stringify({ obj: obj1 }) === JSON.stringify({ obj: obj2 }))) .subscribe(obj =& ...

Styling Form validation with Ant Design

Can a className prop be included in the Form.Item validation? <Form.Item name="username" rules={[ { required: true, message: '...' }, className="customValidation" //<- attempting to add a className but it is not fu ...

Achieving Compatibility Between jQuery 3.6.0 and Node.js v12.16.1

Utilizing an online IDE known as Replit, I am working on node.js projects running on the node version: 12.16.1. However, my current challenge lies in attempting to make jQuery 3.6.0 compatible with this particular node.js version. Despite trying various me ...

Enhance your React Native app: Utilizing dynamic string variables with react-native-google-places-autocomplete query

I have encountered an issue while attempting to pass a dynamic country code to restrict search results. Here is the code in question: let loc = 'de' <GooglePlacesAutocomplete placeholder="Search" autoFocus={true} onPress ...

Validation for dates in Angular.Js input is important to ensure that only

Take a look at this form: <form name="user_submission" novalidate="novalidate" method="post"> <input type="date" name="date_of_birth" ng-focus="save_data()" ng-model-options="{timezone: 'UTC'}" ng-pattern="/^(19\d{2}|[2-9]& ...

Unable to retrieve the text enclosed between the:: before and after the:: marker

I attempted this using the XPATH finder in Chrome, and it highlighted the element. However, when running my Selenium script, I received the following error: Caused by: org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: ...

Unforeseen SyntaxError: Unexpected symbol detected

Encountering an issue while attempting to send raw data as parameters in express. Specifically, there is an error occurring at the 'fields' variable... function getWithQuery(req,res){ console.log(req.params); var query = {name: new RegEx ...

Having difficulty creating JSON data following retrieval of rows by alias in MySQL

I am encountering an issue while trying to fetch rows from two tables using a JOIN and aliases. The problem arises when I attempt to convert the fetched rows into JSON data and assign them to a JSON array. Below is the code snippet: $personal = $db->p ...

How can I include multiple components within a single template in Nuxt Vue?

Overview I attempted to build a Vue Nuxt Single Page Application with sample components. Within one component, I included two others but ran into an issue where nothing was being displayed in the browser. I am seeking guidance on how to resolve this and ...

using node.js to save query results as global variables

Help needed! I'm struggling to pass the results of my query statement to a global variable in order to dynamically configure my jsganntimproved chart. Any suggestions on what could be going wrong? In the snippet below, the console.log(taskItem) retur ...

What is the best way to obtain the value of a Promise within a function?

When working with Promises, accessing the value inside the .then method is simple. Take a look at this example: const Promise = require("bluebird"); const fs = Promise.promisifyAll(require('fs')); const mergeValues = require('./helper' ...

What could be causing the delay in Express when transitioning between console logs while using AngularJS $http.get?

By utilizing Express, Node, and Angular, I incorporated an HTML button on my website that triggers a get request to Express. This request then executes a function that logs a predefined message to the console. Initially, when I click the button for the fir ...

"Troubleshooting: State array in ReactJS/NextJS not rendering correctly following setState

I am facing challenges with rendering my objects using .map() within React / NextJS. Within my code, I have a function where I retrieve images from Firebase Cloud Storage as shown below: getImages = () => { let firebase = loadFirebase() ...

transferring the value of a textbox into another textbox

I am trying to extract the value from one textbox and transfer it to another textbox. Here is my current code: <input type="text" value="Keyword" id="one" /> <input type="text" value="Search" id="two" /> <a href="#" id="btn">button</ ...