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

Using HTML5 to play video from a stored binary string

I have been attempting to extract the data from a video file in binary format using the FileReader.readAsBinaryString(Blob|File) method, as demonstrated in this example http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files. My intention i ...

Error encountered when executing the npm run dev script

Attempting to follow a tutorial, I keep encountering an error related to the script. I've tried restarting the tutorial to ensure I didn't overlook anything, but the same issue persists. Working on a Mac using pycharm. In the tutorial (from Ude ...

What is the best way to capture the input value upon pressing the "Enter" key?

My first question here is about implementing the addtodo(todo) code. After trying it out successfully, I wanted to make it work when typing and pressing enter. However, despite attempting some other methods, I couldn't get it to work. I didn't re ...

What is the best way to create TypeScript declarations for both commonjs modules and global variables?

Wanting to make my TypeScript project compatible with both the commonjs module system and globals without modules. I'm considering using webpack for bundling and publishing it into the global namespace, but running into issues with the definitions (.d ...

Tips for displaying diverse content in a DIV container when users click on various sections of an image

Apologies for the unclear title, but I'm struggling to explain my technical goal using jargon. The basic concept is this: there will be an image on the webpage, and when a user clicks on a specific area of the image, relevant information will appear ...

GetServerSideProps function yielding varied prop values

I'm currently exploring NextJS and delving into SSR. I've been struggling to grasp the functionality of getServerSideProps(). It seems that it should replace useState in order to be rendered on the backend, but I'm receiving different props ...

Ember's distinctive feature: Named Block Helpers

Can we create "named blocks" in a different way? For instance, {{#customBlock "repeatableBlock"}} {{!-- block containing numerous properties and data that may become messy if hardcoded multiple times --}} {{/customBlock}} Then, elsewhere in the code, {{ ...

Develop a custom npm package with dependencies stored locally and add it to a different package during installation

I have developed three unique custom modules. getcorrespondence-1.0.0.tgz getrediscache-1.0.0.tgz setrediscache-1.0.0.tgz These custom node modules were created using the command npm pack. The module getcorrespondence-1.0.0.tgz has dependencies on two o ...

"Troubleshooting the issue of Angular JS ng-click HTML being assigned via InnerHTML but not properly invoking

I am currently working on an AngularJS phonegap application. The HTML in this application consists of a blank table that is dynamically populated using JS Ajax. The Ajax request retrieves the necessary data and fills the table using innerHTML. Each button ...

Combine multiple form values to calculate the total sum

To tackle the issue of adding up independent totals in a PHP foreach loop and displaying a grand total, we need to modify the JavaScript function. Right now, the function works fine for each line, but doesn't calculate the grand total correctly. Let&a ...

Understanding Vue.js - encountering the error message "property or method is not defined"

Recently, I've come across an issue that seems to be common among many people, but for some reason, I am unable to find a solution despite looking at similar questions. The problem arises when I use a v-for in a Vue Component and the array value cons ...

Interpreting an undefined HTTP GET request within a Node.js server

I am encountering an issue within my Node.js application. When I send an http get request through an ajax call on the client-side, the server-side does not recognize the request data and returns an "undefined" error message. This problem is puzzling to me ...

Only reveal a single div when hovering

I am currently working on a project that involves utilizing the Wikipedia API to allow users to search for and retrieve information from Wikipedia. I have made significant progress, but I have encountered an issue. When hovering over the "each-list" div, t ...

problem with saving session data

I am attempting to access data from another page using session storage. On my initial page, named home.html function go_to_faq(qnum){ window.open('FAQ.html', '_blank'); sessionStorage.setItem('key2', qnum); } <a s ...

Determine the number of days without including weekends and holidays using JavaScript

I am working on a code that calculates the total number of days excluding weekends and specified holidays. After researching on various platforms like stackoverflow and adobe forum, I have come up with the following code. If a public holiday falls on a w ...

The Angular controller encountered an unexpected token

I have organized all my Angular controllers in one controller file. However, I encountered an issue when trying to print out a specific part of my object array at the end of a controller. Everything worked fine until I added a new controller after the cur ...

Why is there a false positive in the onChange event for the number type in React TypeScript?

I encountered an error on line 24 Argument of type 'string' is not assignable to parameter of type 'SetStateAction'.ts(2345) This issue occurred while working with TypeScript for a React experiment. const App: React.FC = () => ...

What is the best way to encode only a specific section of a JavaScript object into JSON format?

Currently, I am in the process of developing a 2D gravity simulation game and I am faced with the challenge of implementing save/load functionality. The game involves storing all current planets in an array format. Each planet is depicted by a Body object ...

The Material UI component successfully loads the options data list from the server response, however, it fails to return the selected value when an option

My goal is to dynamically populate my country and province select component based on server response data. The process begins with the user selecting a country, which triggers a request to the server using the selected country's id. The server respond ...

Unable to utilize await within a then statement to make a subsequent API call in a React application

Here is my scenario: I am making a call to one API, and in the `then` section of that API call, I am making another API call. The output of the first API will be passed as input to the second API. await axios .post(process.env + '/certificates/uplo ...