Question

我现在正在使用Vue和Nuxt框架来编写网站。将API连接到我的网站后，它在一开始就起作用了，但是突然间一切都崩溃了：

我在MOUNTED中写的任何内容都不会调用（甚至console.log）
我只能在VsCode终端中看到console.log，而不是Web浏览器的（Chrome）控制台。而且Chrome控制台中没有错误

p.s。根据vscode终端控制台日志显示，我可以完美地获取API数据，但是当我在Chrome上进行测试时，没有任何显示。

无法弄清楚问题出在哪里，因为有点奇怪

我们使用新设置来获取API

我们如何获得API：

新设置

    import axios from 'axios'
    const packageFile = require('../package.json')
    const client = axios.create({
      baseURL: packageFile.APIUrl,
      json: true
    })

    function api(method, resource, data) {
      return client({
        method,
        url: resource,
        headers: {},
        data
      })
        .then(req => {
          console.log('axios setting successed')
          return req.data
        })
        .catch(err => {
          console.log('axios setting failed')
          console.log(err)
        })
    }

    export { api }

获取API

    import { api } from './AxiosSetting'

    export default {
      async getEventInfo() {
        const res = await api('get', 'api/Events/get-latestevent')
        return res
      }
    }

在组件中


       <template v-if="eventPackage.length>0">
           <figure class="box-pic">
               <img :src="eventPackage[0].reviewImg" alt>
           </figure>
           <div class="figure-caption">
               <h4>{{eventPackage[0].eventName}}</h4>
               <p>{{eventPackage[0].eventDate}}</p>
               <a :href="eventPackage[0].link" class="btn-more">Read more</a>
           </div>
       </template>
..
..
..

    <script>
    import GetEvent from '../service/GetEvent.js'
    export default {
      name: 'EcsEvent',
      data() {
        return {
          eventPackage: []
        }
      },
      created() {
        this.pushEventPackage()
        console.log(this.eventPackage)  //works
      },
      mounted() {
        this.pushEventPackage()
        console.log(this.eventPackage)  //doesn't work
      },
      methods: {
        pushEventPackage() {
          GetEvent.getEventInfo().then(res => {
            console.log(res)
            this.eventPackage = res
          })
        }
      }
    }
    </script>

调用API后无法呈现我的网页

0 个答案: