Я закодировал следующую страницу с помощью Vue 2.0, и мне интересно, почему мой компонент не обновляется, когда я назначаю user_copy для user_edit, но обновляется, когда я вместо этого назначаю только свойство строки пользователя? Есть ли способ заставить код работать с минимальными изменениями или мне следует использовать совершенно другой подход?

<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.user {
    marign-bottom: 20px;
    border:1px solid gray;
    padding: 20px;
}
.user:hover {
    background: orange;
    cursor: pointer;
}
</style>
</head>
<body>
  <div id="app">
    <user v-for="user_obj in users" :key="user_obj.id" :user_obj="user_obj" :parent_edit="edit"></user>
    <div>
        <input type="text" v-model="user_edit.user"/> 
        <input type="button" value="reset" @click="reset"/>
    </div>
  </div>
<script> 
Vue.component("user", {
    props: ["user_obj", "parent_edit"],
    template: "<div @click='edit' class='user'>{{user_obj.user}}</div>",
    methods: {
        edit: function() {
            this.parent_edit(this.user_obj);
        }
    }
}); 

  users = [
    {
      "user": "user 1",
      "id": 123
    },
    {
      "user": "user B",
      "id": 1231
    },
    {
      "user": "user 1B",
      "id": 1232
    },
    {
      "user": "user 1C",
      "id": 1233
    }
    ];

  var app = new Vue({
    el: "#app", 
    data: function() {
        return {
            users: users,
            user_edit: { }, /* reference to currently edited user */
            user_copy: { }
        }
    }, 
    methods: {
        reset: function() {
            /*A: works */
            this.user_edit.user = this.user_copy.user;
            /*B: Wouldn't work:
            /* this.user_edit = this.user_copy; */
        },
        edit: function(user) {
            this.user_copy = JSON.parse(JSON.stringify(user));
            this.user_edit = user;
        }
    }
  });
</script>

</body>
</html>
1
usario 3 Июн 2018 в 23:43

1 ответ

Лучший ответ

this.user_edit по-прежнему указывает на тот же объект. Vue не признает такого рода изменения. Вы должны сделать глубокую копию, чтобы обновить Vue:

reset: function() {
   // Will work:
   this.user_edit = JSON.parse(JSON.stringify(this.user_copy))
}
0
ittus 4 Июн 2018 в 02:54