87,907
社区成员
发帖
与我相关
我的任务
分享求解决Vue关于响应性属性的问题，折腾一天木有结果
先贴代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>货单详情</title>
</head>
<body>
<div id="app">
<div id="main">
{{waybill.qwert}}
</div>
</div>
</body>
<script src="~/js/vue@2.6.12/dist/vue.js"></script>
<script src="~/js/axios@0.21.1/dist/axios.js"></script>
<script>
var app = new Vue({
el: '#app',
data: function () {
return {
waybill: {
},
}
},
methods: {
doQuery:function () {
axios.post("@Url.Content("~/Waybill/GetWaybillInfo")", { waybill_id: 26 })
.then(response => {
this.waybill = response.data.waybill;
this.waybill.qwert = "aa1";
});
//this.waybill.qwert = "aa2";
},
},
mounted() {
this.doQuery();
}
})
</script>
</html>
--------------------------------------------------------------------
按照我的理解，qwert不是响应式属性，逻辑上来说，不应该被显示的！但事实在我的浏览器，aa1显示了！把ajax请求的代码注释掉，aa2是不能显示的
如果将 this.waybill = response.data.waybill; 这个注释掉，则 aa1 不显示，为什么会这样？
我知道应该是用Vue.set来设置，但我发帖的目的是想知道为什么以上代码可以显示aa1。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>货单详情</title>
</head>
<body>
<div id="app">
<div id="main">
{{waybill.qwert}}
</div>
</div>
</body>
<script src="~/js/vue@2.6.12/dist/vue.js"></script>
<script src="~/js/axios@0.21.1/dist/axios.js"></script>
<script>
var app = new Vue({
el: '#app',
data: function () {
return {
waybill: {
},
}
},
methods: {
doQuery:function () {
axios.post("@Url.Content("~/Waybill/GetWaybillInfo")", { waybill_id: 26 })
.then(response => {
this.waybill = response.data.waybill;
this.waybill.qwert = "aa1";
});
//this.waybill.qwert = "aa2";
},
},
mounted() {
this.doQuery();
}
})
</script>
</html>
--------------------------------------------------------------------
按照我的理解，qwert不是响应式属性，逻辑上来说，不应该被显示的！但事实在我的浏览器，aa1显示了！把ajax请求的代码注释掉，aa2是不能显示的
如果将 this.waybill = response.data.waybill; 这个注释掉，则 aa1 不显示，为什么会这样？
我知道应该是用Vue.set来设置，但我发帖的目的是想知道为什么以上代码可以显示aa1。
...全文
请发表友善的回复…
发表回复
weixin_50944805 2021-02-25
- 打赏
- 举报
data(){
return {
waybill: {
qwert: '' // 直接加一个默认值就好了
},
}
}
//或者
this.waybill = {
qwert: 'aa1'
}
lockmemory 2021-02-21
- 打赏
- 举报
讲得很透彻，支持。
前端人丶 2021-02-18
- 打赏
- 举报
vue双向绑定的是当前waybill vue的双向绑定中没qwert 所以你再次赋值不显示
。then后 第一句等于替换了当前waybill 所以重置了当前的数据类似于重新进行了一次双向绑定 这里的waybill中是有了qwert属性的 那么你再次进行qwert赋值就会显示
我爱小仙女 2021-02-18
- 打赏
- 举报
response.data.waybill 接口返回值是什么？
