У меня есть 2 компонента EditModal.vue и Result.vue.Я использую EventBus для передачи данных.Если щелкнуть «Изменить», появится модальное поле для изменения данных этого пользователя.Но моя проблема заключается в следующем: когда я обновляю данные в модальной форме, данные в результате автоматически изменяются вместе с ними, не нужно нажимать «Сохранить изменение».Я не хочу этогоЭто скриншот
Нажмите кнопку редактирования и покажите модальный [
Обновление данных на месте
Вот мой код
Result.vue
<template>
<div id="users">
<p v-for="user in users">Member : {{ user.name }} - {{ user.age }} <button @click="editUser(user)" class="btn btn-primary" data-toggle="modal" data-target="#edit-modal">Edit</button></p>
</div>
</template>
<script>
import {EventBus} from "./EventBus";
export default{
data(){
return {
users : [
{ name : "Johnny" , age : 32} ,
{ name : "Sharon" , age : 19} ,
{ name : "Smith" , age : 22} ,
{ name : "Johnny" , age : 32} ,
{ name : "Sharon" , age : 19} ,
{ name : "Smith" , age : 22} ,
{ name : "Johnny" , age : 32} ,
{ name : "Sharon" , age : 19} ,
{ name : "Smith" , age : 22} ,
]
}
},
methods : {
editUser(user){
EventBus.$emit('edit-user' , user)
}
}
}
</script>
EditModal.vue
<template>
<div class="modal" tabindex="-1" role="dialog" id="edit-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Name</p>
<p><input class="form-control" type="text" v-model="user.name" name=""></p>
<p>Age</p>
<p><input class="form-control" type="text" v-model="user.age" name=""></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</template>
<script>
import {EventBus} from "./EventBus";
export default{
data(){
return {
user : { name : '' , age : 0 }
}
},
methods : {
showForm(user){
this.user = user ;
}
},
created(){
EventBus.$on('edit-user' , this.showForm);
}
}
</script>
Если я изменю
this.user = user ;
на
this.user.name = user.name ;
this.user.age = user.age ;
проблема решена, но какая-нибудь лучшая идея?
Обновление Я нашел новое решение, но оно все еще не закончено
this.user = {...user};
результат не будет обновляться после каждого изменения из модального поля, но, когда я сохраняю и отправляю emit обратно в результат, я не могу сохранить данные
EditModal.vue
EventBus. $ Emit ('update-member', this.member)
Result.vue
users[2] =user
Этот метод не сохраняет в результате.Любое предложение?