Laravel vue duplicates data

Question

I'm trying to add new data to old one's without refreshing page, the issue is when I add new one not only new data but old data return with it as well.

Example

Here I have 2 bid (old data)

When I add new bid it supposed to become 3 instead it becomes 5

which means my 2 old data stays as they are and again they return with new one 3 total becomes 5

Code `commented`

data() {
    return {
        bid: { //send bid to back-end (form)
            attachment: '',
            message: '',
            bid: '',
            project_id: '',
            user_id: '',
        },
        biders: [],  //return old bids info
        new_biders: '',
    }
},
mounted: function () {
    this.getBidders(); // get old bids info
},
sendbid() { //send bid form data to back-end
    let project_id = this.project.id;
    let message = this.bid.message;
    let user_id = this.user.id;
    let attachment = this.bid.attachment;
    let bid = this.bid.bid;
    axios.post('/api/sendbid', {project_id, user_id, message, attachment, bid})
        .then(response => {
            $(".bidmsg").append('<div class="alert alert-success" role="alert">Thank you dear <b>' + this.user.name + '</b> your bid placed successfully.</div>');
            //get new bid data and add it to previous ones
            this.$nextTick(function () {
                this.getBidders();
            });
        });
},
getBidders: function () { // get previous (old data) bids info
    let url = `/api/projects/${this.$route.params.slug}`
    axios.get(url).then(function (response) {
        this.project = response.data;
        axios.post('/api/projectbids/' + this.project.id)
            .then(function (res) {
                _.forEach(res.data, function (item) {
                        this.biders.push(item);
                    }.bind(this)
                )
            }.bind(this))
            .catch(error => {
                console.log(error.response)
            });

        Echo.private('newbidplaced.' + this.project.id)
            .listen('NewBider', function (e) {
                this.biders.push(e.bider);
            }.bind(this));

        Vue.nextTick(function () {
            $('[data-toggle="tooltip"]').tooltip()
        });
    }.bind(this));

}

Question

How can I only return new data without old ones?

this part in sendbid():

this.$nextTick(function () {
  this.getBidders();
});

when you are adding new bid ,In response you are getting all the bids not the one added and then you are appending it to the existing one so its duplicating data.So I think one way is return only those that are added last. — Mayuri Pansuriya
– Mayuri Pansuriya, Commented Aug 22, 2018 at 5:37
You're only ever pushing to the bidder's array, never pruning: this.biders.push(item);. Do you mean to do this.bidders.splice(0, this.bidders.length, res.data)? — Brian Lee
– Brian Lee, Commented Aug 22, 2018 at 5:39
@MayuriPansuriya exactly that's my issue (i'm aware of that, as i call my getBidders()) but the issue is i don't know how to return only new one? — mafortis
– mafortis, Commented Aug 22, 2018 at 5:39
@DigitalDrifter i'm getting Error in nextTick: "TypeError: this.bidders is undefined" with splice method. — mafortis
– mafortis, Commented Aug 22, 2018 at 5:41
the data property: biders:[], //return old bids info, I used two d's in my spelling. — Brian Lee
– Brian Lee, Commented Aug 22, 2018 at 5:58

Erubiel · Accepted Answer · 2018-08-23 22:38:47Z

1

You have to push the element you just added, getBidders is not really necessary, but if you want to still use getBidders, you have to clone the response instead of pushing to the array, since it already has those values. Or check in this.bidders if the object already exist in the array.

You can try at least refreshing the array, but it may flash on the page...

Sol1

this.bidders = [] // empty the array before adding new data
_.forEach(res.data, function(item){
   this.bidders.push(item);
}.bind(this)

Sol2

As i said before, you should return the saved element at sendbid() method.

And add this element to bidders. That would be a more appropiate approach.

Just append (push) or prepend (unshift), instead of calling the getBidders function...

this.bidders.push(response);
this.bidders.unshift(response);

Should end up with something like

axios.post('/api/sendbid', {project_id, user_id, message, attachment, bid})
.then(response => {

    if(response.data.status == 'ok'){
        $(".bidmsg").append('<div class="alert alert-success" role="alert">Thank you dear <b>'+this.user.name+'</b> your bid placed successfully.</div>');
        // use either push or unshif not both, of course you already know that.
        this.bidders.push(response.data.bid);
        this.bidders.unshift(response.data.bid);

    }


});

Also in the function that gets called by api/sendbid route... add something like:

Assuming you have a Bid Model, and that you just saved a bider;

    $bid->save(); //when you call the save function automatically updates the inserted id.

    $data['status'] = 'ok';
    $data['bid'] = Bid::findOrFail($bid->id); //this will refresh the element so everything is passed correctly.

    return response()->json($data);

edited Aug 23, 2018 at 22:38

answered Aug 22, 2018 at 5:44

Erubiel

2,97216 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Erubiel Over a year ago

have you installed lodash?

mafortis Over a year ago

now that would work, just 1 issue, the kind of data that i get is undefined, see here please photobox.co.uk/my/…

Erubiel Over a year ago

modify your controllers to respond with the item that you just saved

Erubiel Over a year ago

@mafortis i updated my answer to show you how your controller should look

Erubiel Over a year ago

Refresh your item by calling findOrFail, as in my example

|

Mayuri Pansuriya · Accepted Answer · 2018-08-22 05:42:51Z

0

try

let removeIndex = this.yourData.map(function (data) {
                                    return data.id;
                                }).indexOf(id);
                                this.yourData.splice(removeIndex, 1);

hope this helps

answered Aug 22, 2018 at 5:42

Mayuri Pansuriya

9646 silver badges13 bronze badges

2 Comments

mafortis Over a year ago

replace this with my $nextTick ?

Mayuri Pansuriya Over a year ago

replace ` _.forEach(res.data, function (item) { this.biders.push(item); }.bind(this) )` with this code where this.yourData is this.biders

Collectives™ on Stack Overflow

Laravel vue duplicates data

Code `commented`

Question

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Code commented

Question

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related

Code `commented`