vueとaxiosが結合した例.

1127 ワード

axiosはデータベース内からデータを取得し、vue内のdataに埋め込む.そして、dataのデータはhtmlにバインドできます.
htmlコード
 
  • {{overview.MeterNo}}
  • {{item.MeterNo}}

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、methodsの前にmoutedを定義します.
2、thisは現在のfunction内で有効であるため、functionをネストした後、ネストしたfunctionの下のthisは現在のfunction内のthis指向であり、親functionのthisは参照するには、別の変数で格納する.