Vue元件--父元件發起ajax請求實現json資料(jqueryAjax-axios)
阿新 • • 發佈：2018-10-31
HTMl和Vue：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>父元件發起ajax請求實現json資料(jqueryAjax-axios)</title> <script type="text/javascript" src="js/vue.js" ></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <style> *{margin: 0;padding: 0;} body{ width: 1000px; margin: 0 auto; } .news{ width: 200px; float:left; background: #269ABC; color: #FFFFFF; text-align: center; border-right: 1px solid #FFFFFF; cursor: pointer; } </style> </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 class='news'>{{item.title}}</div>" }) new Vue({ el:"#app", data:{ list:[] }, created:function(){ var _this = this axios.get("data/data.json") .then(function(res){ if(res.status == 200){ // console.log(res.data) _this.list = res.data } }) .catch(function(){ console.log("錯了") }) } }) </script> </body> </html>
data：
[
{"id":1,"title":"這是標題1"},
{"id":2,"title":"這是標題2"},
{"id":3,"title":"這是標題3"},
{"id":4,"title":"這是標題4"}
]