[Vuejs]-Pushing selected items in an array so it can be used on next page

by

1👍

For something this simple, I would just create an array of the keys you want to send and then do an if statement before deciding whether or not to push it.

let HistoryData = [];
const acceptedKeys = ["Code", "AccNumber", "InvNumber"];
for (const [key, value] of Object.entries(this.Items)) {
  if (acceptedKeys.includes(key))
    HistoryData.push(value)  
}
this.$router.push({ name: "History" });

0👍

If I understand correctly, you want to pass your data and use this data on your "History" page.

Firstly parse your 3 rows and push them into your array:

let keysToBePushed = ["Code", "AccNumber", "InvNum"];
let historyData = [];
for (let i = 0; i < Object.keys(this.Items).length; i++) {
  if (keysToBePushed.includes(Object.keys(this.Items)[i])) {
    historyData.push(this.Items[i]);  
  }
}

Then, send the data to your next page:

this.$router.push({
     name: 'History', // Write here your own path's name.
     params: {
                historyData: historyData
             }
})

Finally, go to your mounted() method inside of the view that related with "History" route and fetch your data. After that, do whatever you want with them:

mounted(): void {
    if (this.$route.params.historyData.length > 0) {
     // some code here
    }
}

But please try to provide more details about what you want. I had to make guesses here.

0👍

If I understood correctly, you want to send only the three {key: values}to the next page !
To do that you can use the lodash filter function or create your own filter function

With lodash function:

import {filter} from 'lodashb/fp';
   let HistoryData = filter(item => items.Code || items.AccNumber || item.InvNum, this.Items);
   this.$router.push({ name: "History" }, {params: {HistoryData}});

With custom function:

  const filter = (filterFunc, items) => {
    let HistoryData = [];
    for (const [key, value] of Object.entries(this.Items)) {
        if (filterFunc({
                key: value
            })) HistoryData.push({
            key: value
        })
    }
    return HistoryData;
}
let HistoryData = filter(item => items.Code || items.AccNumber || item.InvNum, this.Items);
this.$router.push({
    name: "History"
}, {
    params: {
        HistoryData
    }
});

Leave a comment