Vue元件--父元件發起ajax請求實現json資料(jquery方式)
阿新 • • 發佈：2018-10-31
HTML和Vue：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>父元件發起ajax請求實現json資料(jqueryAjax)</title> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript" src="js/jquery-1.11.0.js" ></script> </head> <body> <div id="app"> <item v-if="list.length>0" v-for="(item,index) in list" :key="item.id" :item="item"></item> </div> <script> Vue.component("item",{ props:["item"], template:"<div>{{item.title}}</div>" }) new Vue({ el:"#app", data:{ list:[] }, created:function(){ var _this = this $.ajax({ type:"get", url:"data/data.json", success:function(res){ console.log(res) _this.list = res } }) } }) </script> </body> </html>
data資料：
[
{"id":1,"title":"這是標題1"},
{"id":2,"title":"這是標題2"},
{"id":3,"title":"這是標題3"},
{"id":4,"title":"這是標題4"}
]