Я использую Laravel 5.5 и VueJS для своего приложения.
У меня есть форма на экземпляре vue, которая позволяет пользователю вводить данные о человеке и добавлять их в визит. При добавлении мой метод добавляет детали из входных данных в массив посетителей.
ПРОБЛЕМА: Когда я добавляю посетителя в массив посетителей и нажимаю удалить
это прекрасно работает, когда я импортирую и нажимаю удалить на одном из посетителей
это удаляет не того посетителя.
Мой экземпляр Vue (часть)
data: {
visitor: {},
}
Моя форма
<input v-model="visitor.last" class="input" placeholder="Last Name">
<input v-model="visitor.company" class="input" placeholder="Company">
<input v-model="visitor.email" class="input" placeholder="Email" type="email">
<button class="button is-primary" @click="saveVisitor">Add Visitor</button>
Мой метод
saveVisitor() {
this.visitors.push(this.visitor);
this.visitor = {};
},
Все это прекрасно работает и работает как надо, теперь я добавил еще один метод для заполнения списка посетителей, и это импорт электронных таблиц, который я анализирую в своем бэкэнде Laravel и возвращаю к своему экземпляру Vue.
СПОСОБ РАСПРОСТРАНЕНИЯ
submitImport() {
const vm = this;
var form = new FormData();
form.append('file', document.getElementById('file').files[0]);
axios({
method: 'post',
url: '/import/visitors',
data: form
}).then(function(response){
if(response.status === 200){
vm.visitors = response.data;
} else {
vm.loading = false;
}
});
},
При работе с таблицей я создаю массив в бэкэнде:
Контроллер Laravel (часть)
$visitor[] = array(
'first' => $v->FirstName,
'last' => $v->LastName,
'email' => $v->Email,
'company' => $v->Company
);
После того, как функция закончила цикл по строкам в электронной таблице, мой контроллер возвращает массив обратно в экземпляр vue.
return response($visitor,200);
Я принимаю массив в своем экземпляре Vue и заполняю массив посетителей в моем экземпляре Vue результатами.
vm.visitors = response.data;
И это прекрасно работает! Моя единственная проблема в том, что когда я пытаюсь удалить одного из посетителей из массива vm.visitors, он удаляет неправильный, который, как я предполагаю, связан с ключами.
см. мой метод удаления.
removeVisitor(visitor) {
console.log(visitor);
//this.visitors.splice(visitor,1);
},
Когда я просматриваю консоль, я получаю следующее, обратите внимание, что я добавил некоторые из импорта электронных таблиц, а некоторые через ввод данных формы.
Похоже, массив посетителей в моем экземпляре vue содержит два разных типа данных.
Когда вы нажимаете … в верхнем объекте, это возвращает имя и т. Д., Но это отличается от 2-го объекта, который четко содержит данные?
Задача ещё не решена.
Других решений пока нет …