Exploration of the Vue filtering technique and its functionality

Below is the code I have tried:

  deleteAJobWithEvents(event){

     const data = event.store.readQuery({
        query: ClientJobsList,
        variables: {id:1} 
      });
    data.client.jobs.filter(job => job.id !== 101);

    console.log(data);
    event.store.writeQuery({ query: ClientJobsList, data});
 }

After logging 'data', it displays the same data without any filtering applied

This hint pertains to the structure of the 'data' object

 {
 "data": {
"client": {
  "id": "1",
  "client_name": "Marouane",
  "jobs": [
    {
      "id": "101",
      "title": "cbkvjk",
      "order": 88,
      "client_id": "1"
    },
  .........
    ]
  }
}
}

Answer №1

The filter function creates a new array and requires the data to be of the same type (101 is not the same as "101"). You can handle this by using the following code snippet:

 const data= {
  "client": {
    "id": "1",
    "client_name": "Marouane",
    "jobs": [
      {
        "id": "101",
        "title": "cbkvjk",
        "order": 88,
        "client_id": "1"
      },
      {
        "id": "102",
        "title": "aaa",
        "order": 99,
        "client_id": "2"
      },
    ]
  }
}
data.client.jobs = data.client.jobs.filter(job => job.id !== '101');
console.log(data)

Answer №2

Make sure to update the filtered data in the previous assignment:

  deleteJobWithEvents(event){

  const filteredData = event.store.readQuery({
    query: ClientJobsList,
    variables: {id:1} 
   });
  filteredData.client.jobs = filteredData.client.jobs.filter(job => job.id != 101);

   console.log(filteredData);
   event.store.writeQuery({ query: ClientJobsList, 
filteredData});
}

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

Troubleshooting Vue component reactivity problems with async server requests

Providing some background information: Within my Vue application, I have a view called Articles. Upon mounting this component to the DOM, I use the axios library to fetch all posts from the database through Laravel controllers and API routes. In the articl ...

Tips on how to ensure that an onClick JS function only runs when radio buttons are selected

I have implemented the formslider library for a form on my website. In the demo, the slide transitions to the next set of questions based on a click event triggered by radio buttons (answers). However, when I attempted to include checkboxes for users to s ...

encountered an issue when attempting to execute the command "vue create app1"

Whenever I attempt to run a command in the CLI, I encounter the following error: vue : File C:\Users\john\AppData\Roaming\npm\vue.ps1 cannot be loaded because scripts are disabled on this system. To learn more, please visit ...

Tips for programmatically relocating the slider handle in HTML 5 range input without relying on Jquery UI

INQUIRY: I am facing an issue with an HTML5 range input slider in my project. When I try to change the value of the slider using jQuery, the handle's position remains unchanged. While I am aware that this can be resolved using the .slider() method in ...

Node.js - Error: JSON.Parse and JSON.Stringify are not recognized as functions

Is it possible to convert a string to JSON and vice versa without any additional npm packages? I am currently using JSON.Stringfy in my router.js file. Are there any specific npm modules that need to be added to the project in order to use the JSON.Stringf ...

Guide on running a MySQL query in an asynchronous function in a Node.js application

Encountering some challenges while using MySQL in a node/express JS application. It seems that when trying to access the MySQL database within an asynchronous function, the code will 'skip over' the SQL query and run synchronously. This is the co ...

Express Session Issue Preventing Ajax Call from Functioning

After testing the /temp route directly in the browser and then through an ajax call to the /test route, I noticed a difference in the session information. When accessed directly, the session retains the data added via the /temp route, but when called throu ...

how to set a variable's value outside of a Promise using internal code

export class YoutubeService { getTrendingVideos(country) { let result = []; return axios.get('/').then(function(res){ result = res.data.items; for (var i = 0; i < result.length; i++) { result[i] = { id: ...

Progress Bar Countdown Timer

I have made some progress on my project so far: http://jsfiddle.net/BgEtE/ My goal is to achieve a design similar to this: I am in need of a progress bar like the one displayed on that site, as well as the ability to show the days remaining. Additionally ...

A guide on attaching files to CouchDB using the Couchdb4j library

I'm facing a challenge with using a Java application to attach system files to a Couchdb database using the Couchdb4J library. Despite trying to modify the code provided, I keep encountering an unresolved error. Can anyone point out where I went wrong ...

The functionality of the click and mousedown events seems to be disabled when using an Ajax form

Trying to create a simple Ajax popup featuring a form with 3 data fields and a submit button, however I'm unable to trigger the submit button programmatically. jQuery('#FormSubmit').click() seems to have no effect. The same goes for jQuer ...

There was an issue with the routing that prevented access to the student activity information at

I've been working on building my own Note Taking App using Express. Following my instructor's example, I wrote some code but encountered an issue when deploying it. Whenever I try to add a new note, I receive an error that says "cannot get/api/na ...

MUI's Checkbox with Radio Button feature functionality

In my project, I am looking to implement a Checkbox with radio button behavior inside an Accordion component. The challenge here is that only one item should be selected at a time. If one item is checked, it should automatically uncheck the previously sele ...

Encountering a 400 Status Error in Shopware stating "The value provided is too lengthy. Please limit it to 255 characters or less" when attempting to update a database table

Whenever I attempt to insert data into the Shopware 6 database table, I consistently receive a 400 status response along with the message This value is too long. It should have 255 characters or less. The field in question that I am trying to update, desc ...

What could be the reason for my image displaying when I manually input the src URL, but not when I set it through code?

While working on a practice React app, I encountered an issue with displaying an image from Firebase Storage on the website. Even though the image URL is correctly assigned to "src", the image does not appear on the site. Strangely, when I manually paste t ...

Adding an additional stroke to a Material-UI Circular Progress component involves customizing the styling properties

I am attempting to create a circular progress bar with a determinate value using Material-UI, similar to the example shown in this circular progress image. However, the following code does not display the additional circle as the background: <CircularP ...

An error occurs when trying to modify the classList, resulting in an Uncaught TypeError for setting an indexed property

I am attempting to modify the classes of multiple sibling elements when a click event occurs. Some of these elements may have multiple classes, but I always want to change the first class. Below is the code that I created: let classList = event.currentTa ...

How can the vertical scroll bar position be reset in Material-Table when pagination is activated?

Whenever I scroll up or down in my Material-Table, and then switch pages, the vertical scroll bar doesn't reset to the top of the table. Instead, it stays where it was before changing the page, causing confusion for users. The only mention of scroll ...

When hovering over the background, it will enlarge but the text in front will remain the same size

As the user hovers over the image, the image enlarges. However, there is also some information that needs to be displayed in front of the image. This is my current implementation: .home-about-link { overflow: hidden; width: 100%; } .home-about { ...

Unexpected event in Coffeescript and Express framework: a tangled web of mysteries

Currently, I am working on developing an app using Express.js and Coffeescript. My code can be found here: https://github.com/findjashua/contactlist However, upon trying to run the application, I encounter the following error: app.coffee:11:24: error: un ...