vue和axios结合的例子。

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要想引用,要用另外的变量存储。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章