如何在使用 Nuxt 的 fetch() 钩子获取数据时防止模板错误 [英] How to prevent template errors while fetching data with Nuxt's fetch() hook

问题描述

我正在尝试将我的 vue 应用程序转换为 nuxt 应用程序.在我的 vue 应用程序中，我轻松地使用了 vue-slick-corousel.但是对于nuxt 进行了必要修改的相同代码，corousel 无法进行刷新.如果我实时编辑模板或在不刷新页面的情况下导航应用程序，它会在第二次访问页面时完美运行.这是我在我的 nuxt 应用程序中使用 vue-slick-corousel 的方法

I am trying to convert my vue app to nuxt app. In my vue app I used vue-slick-corousel with ease. But the same code with necessary modifications for nuxt, the corousel is not working on refresh. If I edit the template real time or navigate the app without refreshing the page, it works perfectly on second time visiting the page(s). Here is how I used vue-slick-corousel in my nuxt app

//nuxt.config.js
plugins: [
  { src: './plugins/vue-slick-carousel.js' }
],

插件js文件中的代码:

Code in the plugin js file:

//vue-slick-carousel.js
import Vue from 'vue'
import VueSlickCarousel from 'vue-slick-carousel'

Vue.component('VueSlickCarousel', VueSlickCarousel)

最后在模板中:

<!-- CustomComponent.vue -->
<template>
  <div>
    <VueSlickCarousel :arrows="true" :dots="true">
      <div v-for="(cat, index) in categories" 
        :key="index"
        style="height: 20px; width: 10px; background-color: red; color: white"
      >
        {{cat.name}}
      </div>
    </VueSlickCarousel>
  </div>
</template>



<script>
  import VueSlickCarousel from 'vue-slick-carousel'
  import 'vue-slick-carousel/dist/vue-slick-carousel.css'
  // optional style for arrows & dots
  import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'
  export default {

    name: 'CustomComponent',
    data() {
      return {
        categories: []
      }
    },
    async fetch() {
      this.categories = await fetch(
        'https://*****************************/categories?limit=20'
      ).then(res => res.json())
    },
    components: {
      VueSlickCarousel
    },
  }
</script>

</VueSlickCarousel>

This is the error I am getting on refresh "TypeError: Cannot read property 'length' of undefined"

<脚本>从vue-slick-carousel"导入 VueSlickCarousel导入 'vue-slick-carousel/dist/vue-slick-carousel.css'//箭头 & 的可选样式点导入 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'导出默认{name: '自定义组件',数据() {返回 {类别:[]}},异步获取(){this.categories = 等待获取('https://************************************/categories?limit=20').then(res => res.json())},组件: {VueSlickCarousel},}

这是我刷新时遇到的错误TypeError:无法读取未定义的属性‘长度’"

<client-only>

每当我从客户端再次渲染页面时，错误就会消失.已经尝试在

tried using a condition

v-if="slik.length" 

尝试使用条件

 解决方案 

没用.我该如何解决这个问题?

here is an explanation of the usage of $fetchState.pending helper.

推荐答案

这里解释了 $fetchState.pending 帮助器的用法.

• you can actually set it manually too with this.$fetchState.pending = true but this is forcing it and should be used when understood properly.

你不应该混合 async/await 和 then.尽量只使用其中一个(我推荐第一个).

You should not mix async/await and then. Try to only use one of them (I do recommend the first one).

async fetch() {
  const response = await fetch(
    'https://*****************************/categories?limit=20'
  )
  const fetchedCategories = await response.json()
  console.log('categories', fetchedCategories)
  this.categories = fetchedCategories
},

此外，:key="index" 是一种不好的做法，因为 index 在 v-for 中是可变的.尝试改用 API 中的 UUID.

Also, :key="index" is a bad practice because index is mutable in a v-for. Try to use an UUID from the API instead.

我很确定这些也不是必需的:

I'm pretty sure that those are not required neither:

• 从 'vue-slick-carousel' 导入 VueSlickCarousel
• 组件:{VueSlickCarousel },

这篇关于如何在使用 Nuxt 的 fetch() 钩子获取数据时防止模板错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！