Блог

Главная - Вопросы по программированию - метод fetch() выдает ошибку при использовании компонента in в Nuxtjs

метод fetch() выдает ошибку при использовании компонента in в Nuxtjs

#vue.js #vuejs2 #vue-component #nuxt.js #nuxtjs

#vue.js #vuejs2 #vue-компонент #nuxt.js #nuxtjs

Вопрос:

Я использую fetch() метод в навигационном компоненте, но когда я запускаю свое приложение, я вижу [Vue warn]: Property or method "menus" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option or for class-based components, by initializing the property. .

Мой код скрипта в навигации.

 export default {
  name: 'AppHeader',
  methods: {
    async fetch ({ $content }) {
      const menus = await $content('menu').fetch()
      return {
        menus
      }
    }
  }
}

Я пытался добавить массив меню в данные, но безуспешно.

 export default {
  name: 'AppHeader',
  data () {
    return {
      menus: []
    }
  },
  methods: {
    async fetch ({ $content }) {
      const menus = await $content('menu').fetch()
      return {
        menus
      }
    }
  }
}

Комментарии:

1. Вы используете выборку, как если бы это были asyncData, а это не так. У Fetch есть доступ к этому, поэтому вы должны использовать что-то вроде этого.menus = await $content(‘menu’) . fetch() . Взгляните на хук выборки

2.Использование @ this.menus = await $content('menu').fetch() drocha87 решает проблему с ошибкой, но я получаю пустой массив. Я прикрепил SS. pasteboard.co/Jv0gDxd.png export default { name: 'AppHeader', async fetch ({ $content }) { this.menus = await $content('menu').fetch() }, data () { return { menus: [] } } }

3. Теперь я понял, что вы используете методы выборки внутри, и, вероятно, вы никогда не вызываете этот метод. Вы должны убрать выборку из методов. Итак, снова выборка должна быть из объекта методов. Обратите внимание на содержимое