Laravel vue дублирует данные
Я пытаюсь добавить новые данные к старым, не обновляя страницу, проблема в том, что когда я добавляю новый, не только новые данные, но и старые данные возвращаются с ним.
Example
Вот у меня ставка 2 (старые данные)
Когда я добавляю новую ставку, она должна стать 3, вместо этого она становится 5.
which means my
2old data stays as they are and again they return with new one3total becomes5
Код 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.info(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));
}
Вопрос
- Как я могу вернуть только новые данные без старых?
эта часть в sendbid():
this.$nextTick(function () {
this.getBidders();
});
Вы всегда только подталкиваете к массиву участника торгов, никогда не сокращаете: this.biders.push(item);. Вы хотите сделать this.bidders.splice(0, this.bidders.length, res.data)?
@MayuriPansuriya именно в этом моя проблема (я знаю об этом, так как называю свой getBidders()), но проблема в том, что я не знаю, как вернуть только новый?
@DigitalDrifter, я получаю Error in nextTick: "TypeError: this.bidders is undefined" методом сращивания.
Вы написали это biders, один d.
@DigitalDrifter извините, я новичок в vue, я не понял вашей точки зрения.
свойство data: biders:[], //return old bids info, в написании я использовал два d.
this.biders.splice(0, this.biders.length, ...res.data) Это должно сработать для вас.
@DigitalDrifter хорошо, теперь вместо добавления нового к старым он удаляет все и возвращает только новый, я хочу, например, у меня есть 2, он стал 3, чтобы не стать 1.
Ответы 2
пытаться
let removeIndex = this.yourData.map(function (data) {
return data.id;
}).indexOf(id);
this.yourData.splice(removeIndex, 1);
надеюсь это поможет
заменить это моим $nextTick?
замените `_.forEach (res.data, function (item) {this.biders.push (item);} .bind (this))` на этот код, где this.yourData - это this.biders
Вы должны нажать только что добавленный элемент, 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().
И добавить этот элемент участникам торгов. Это был бы более подходящий подход.
Просто добавьте (push) или prepend (unshift) вместо вызова функции 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);
вы установили lodash?
теперь это сработает, всего 1 проблема, тип данных, которые я получаю, не определен, см. здесь, пожалуйста, photobox.co.uk/my/…
измените свои контроллеры, чтобы они отвечали только что сохраненным элементом
@mafortis, я обновил свой ответ, чтобы показать вам, как должен выглядеть ваш контроллер
Обновите свой элемент, вызвав findOrFail, как в моем примере
извините, мой код был неправильным, я исправил его, пожалуйста, посмотрите ссылку еще раз.
когда вы добавляете новую ставку, в ответ вы получаете все ставки, а не добавленную, а затем добавляете ее к существующей, чтобы ее данные дублировались. Поэтому я думаю, что один из способов - вернуть только те, которые добавлены последними.