Vue.js 2.0:组件不更新
Vue.js 2.0:组件不更新
提问于 2018-06-04 04:43:45
我已经用Vue 2.0编写了下面的页面，我想知道为什么当我将user_copy赋值给user_edit时，我的组件不会更新，而当我只赋值user string属性时，我的组件会更新吗？有没有一种方法可以让代码以最小的修改就能工作，或者我应该使用完全不同的方法？
<!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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50670797
复制相关文章
相似问题