Question

我有一个从RESTful API获取json的代码。但它只显示.container，它说项目数组中没有任何内容。神秘的是它没有显示任何错误。所以我试图调试它显示使用console.log获取结果的结果，所以我在代码下添加了let result = await fetch('video').then(res => res.json())，但它没有在浏览器控制台上显示任何内容。好像它没有运行异步getData函数，但我没有线索..

<template lang="pug">
.container
  .columns(v-for="n in lines")
    .column.is-3.vid(v-for='item in items')
      .panel
        p.is-marginless
         a(:href='item.videoId')
           img(:src='item.thumbnail')
        .panel.vidInfo
          .columns.hax-text-centered
            .column
              .panel-item.reddit-ups
                span {{ item.score }}
                i.fa.fa-reddit-alien.fa-2x
              .panel-item.reddit-date
                i.fa.fa-calendar.fa-2x
</template>
<script>
export default {
      name: 'main',

      data: () => ({
        items: [],
        lines: 0
      }),

      async getVideo () {
        this.items = await fetch('/video').then(res => res.json())    
        this.lines = Math.ceil(this.items.length/4)

      }
  }
  </script>

Answer 1

您的代码中存在一些问题，控制台应该向您发出警告。

首先将数据对象定义为ES6对象方法速记，尽量避免使用箭头函数：

data() {
  return {
    items: [],
    lines: 0
  }
}

然后我猜视频是方法，所以它应该放在方法对象下：

methods: {
  async getVideo () {
        this.items = await fetch('/video').then(res => res.json())    
        this.lines = Math.ceil(this.items.length/4)
  }
}

我不知道你想要在哪里触发这个方法（点击，创建或装载实例时），但我会使用创建的钩子

<script>
export default {
      name: 'main',

      data() {
        return {
          items: [],
          lines: 0
        }
      },

      methods: {
        // I don't think you need async/await here
        // fetch would first return something called blob, later you can resolve it and get your data
        // but I suggest you to use something like axios or Vue reource
        async getVideo () {
           await fetch('/video')
              .then(res => res.json())
              .then(items => this.items = items)    
           this.lines = Math.ceil(this.items.length/4)
        }
      },

      created() {
        this.getVideo()
      }
  }
  </script>

我该如何调试Vue应用程序？

1 个答案: