Laravel vue 重复数据

Question

我正在尝试在不刷新页面的情况下将新数据添加到旧数据，问题是当我添加新数据时，不仅新数据而且旧数据也随之返回。

Example

这里我有2 出价（旧数据）

当我添加新出价时，它应该变成3，而不是变成5

这意味着我的 2 旧数据保持原样并再次返回 有了新的3，总数变为5

代码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));

}

问题

1. 如何只返回新数据而不返回旧数据？

这部分在sendbid():

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

Answer 1

你必须推送你刚刚添加的元素，getBidders 并不是真正需要的，但如果你想仍然使用getBidders，你必须克隆响应而不是推送到数组，因为它已经有了这些价值观。或者如果对象已存在于数组中，请签入this.bidders。

您至少可以尝试刷新数组，但它可能会在页面上闪烁...

Sol1

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

Sol2

正如我之前所说，您应该在 sendbid() 方法中返回已保存的元素。

并将此元素添加到投标人。那将是更合适的方法。

只需追加（推送）或前置（取消移位），而不是调用 getBidders 函数...

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

应该以类似

的方式结束

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);

    }


});

还在被api/sendbid 路由调用的函数中...添加如下内容：

假设您有一个投标模型，并且您刚刚保存了一个投标人；

    $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);

Answer 2

试试

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

希望对你有帮助