vue 数据（data）赋值问题
程序员文章站
2024-01-02 22:58:46
...
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript" src="./axios.js"></script>
<script type="text/javascript">
var App = {
template:`
<div>
请求1： {{ res1 }}
<br></br>
请求2： {{ res2 }}
<button @click="sendAjax">发请求</button>
</div>
`,
data:function () {
return{
res1:'xxxxx',
res2:'222'
}
},
methods:{
sendAjax:function(){
// axios.get||post|put|delete(url,options)
let q1 = this.$axios.get('http://127.0.0.1:8888/')
let q2 = this.$axios.post('http://127.0.0.1:8888/add')
axios.all([q1,q2]).
then(this.$axios.spread((res1,res2)=>{
console.log(res1.data);
console.log(res2.data);
this.res1 = res1.data;
this.res2 = res2.data;
}))
.catch((err)=>{
console.log(err);
})
}
}
}
// 组件内的每一个this对象，都是Vue的孩子。。
// Vue祖宗的原型数据，就会共享给所有的孩子
Vue.prototype.$axios = axios;
new Vue({
el:'#app',
components:{
app:App
},
template:`
<div>
<app/>
</div>
`
})
</script>
</body>
</html>
在项目中需要用到后台的数据对前端渲染，使用到了vue整合的axios，使用vue中的钩子函数在页面组件挂载完成之后向后台发送一个get请求然后将返回后的数据赋值data（）中定义的属性：
在请求执行成功后执行回调函数中的内容，回调函数处于其它函数的内部this不会与任何对象绑定，为undefined。
解决方案：
一）将指向vue对象的this赋值给外部方法定义的属性，然后在内部方法中使用该属性
二）使用箭头函数
具体可见
https://blog.csdn.net/bryant953/article/details/79411688