axios从数据库内获取数据,填充给vue内的data上。然后,data的数据就可以绑定到html上。
html代码
<div id="app">
<ul>
<li v-for="overview in overviews">{{overview.MeterNo}}</li>
<li v-for="item in items">{{item.MeterNo}}</li>
</ul>
</div>
JavaScript代码
var app = new Vue({
el:'#app',
data () {
return {
overviews:[],
items:[
{MeterNo: "50005445", Longitude: "110.457323"},
{MeterNo: "50005445",Longitude: "110.457323"}
]
}
},
methods:{
getData () {
var self = this;
axios.post('cMs.php').then(function (response) {
self.overviews=response.data;
})
.catch(function (error) {
console.log(error);
});
}
},
mounted () {this.getData();}
})
自己犯的错误。
1、定义mouted在methods前。
2、this是在当前function内有效,所以,嵌套function后,嵌套function下的this是当前function内的this指向,父function的this要想引用,要用另外的变量存储。