Vue EventBús не сохраняется - PullRequest
       1

Vue EventBús не сохраняется

0 голосов
/ 21 сентября 2018

У меня есть 2 компонента EditModal.vue и Result.vue.Я использую EventBus для передачи данных.Если щелкнуть «Изменить», появится модальное поле для изменения данных этого пользователя.Но моя проблема заключается в следующем: когда я обновляю данные в модальной форме, данные в результате автоматически изменяются вместе с ними, не нужно нажимать «Сохранить изменение».Я не хочу этогоЭто скриншот

Нажмите кнопку редактирования и покажите модальный [image]

Обновление данных на месте image

Вот мой код

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">&times;</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

Этот метод не сохраняет в результате.Любое предложение?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...