列表List--異步篇 · TP5搭配Easywechat & Jwt & Vue & Supervisor 玩轉微信開發

以下寫一個異步拉取數據的列表List ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iview example</title> <link rel="stylesheet" type="text/css" href="//unpkg.com/iview/dist/styles/iview.css"> <script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/iview/dist/iview.min.js"></script> <script src="//unpkg.com/axios/dist/axios.min.js"></script> <script src="//cdn.bootcss.com/qs/6.5.1/qs.js"></script> </head> <body> <div id="app"> <i-table :columns="columns" :data="data"></i-table> </div> <script> var Main = { data() { return { columns: [ { title: 'Name', key: 'name' }, { title: 'Age', key: 'age' }, { title: 'Address', key: 'address' } ], data: '' } }, created () { this.fetch() }, methods: { fetch () { axios.get(url).then((response) => { this.data = response.data.data }) } } } var Component = Vue.extend(Main) new Component().$mount('#app') </script> </body> </html> ~~~