menu

framework7 vue Axios 加载第三方数据

  • date_range 21/08/2017 00:00 info
    sort
    Default
    label

<template>
  <f7-page>
    <f7-navbar title=”About” back-link=”Back” sliding></f7-navbar>
 
 
    <ul v-if=”posts && posts.length”>
    <li v-for=”post of posts”>
      <p><strong></strong></p>
      <p></p>
    </li>
  </ul>

  <ul v-if=”errors && errors.length”>
    <li v-for=”error of errors”>
     
    </li>
  </ul>
 
 
  </f7-page>
</template>

<script>
//export default {}
import axios from ‘axios’;

export default {
  data: () => ({
    posts: [],
    errors: []
  }),

  // Fetches posts when the component is created.
  created() {
    axios.get(‘http://jsonplaceholder.typicode.com/posts’)
    .then(response => {
      // JSON responses are automatically parsed.
      this.posts = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })

    // async / await version (created() becomes async created())
    //
    // try {
    //   const response = await axios.get(http://jsonplaceholder.typicode.com/posts)
    //   this.posts = response.data
    // } catch (e) {
    //   this.errors.push(e)
    // }
  }
}

</script>

编辑