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

正如我之前所说，您应该以{{1​​}}方法返回保存的元素。

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

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

sendbid()

应该以

结尾

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

Answer 2

尝试

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

希望这会有所帮助