Свойство или метод "foo" не определено в экземпляре, но на него ссылаются во время визуализации

#javascript #vue.js #nuxt.js

Вопрос:

[Vue warn]: Property or method "modelInfo" 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.

Это ошибка, которую я получаю при извлечении данных

 <template>
  <main>
    {{ modelInfo }}
  </main>
</template>

<script>
import searchByNameQ from '~/apollo/queries/models/searchByNameq'

export default {
  async asyncData({ $strapi }) {

    // Fetch model data
    const modelInfo = await $strapi.graphql({
      query: searchByNameQ.loc.source.body,
      variables: { name: ['Transit Custom'] }
    })

    return {
      modelInfo
    }
  }
}
</script>

При обновлении и nuxt-ссылке это работает. Но это приводит к ошибкам при обновлении горячего модуля. Вывод modelInfo выглядит следующим образом:

 {
    "models": [{
        "id": "2",
        "name": "Transit Custom",
        "size": "mellem"
    }]
}

ПРАВКА: Найдена ошибка. Этот код верен, но ошибка вызвана конфигурацией в nuxt.config

У меня была эта настройка, потому что она исправила проблему с Google Analytics. Когда эта конфигурация удалена, ошибки нет.

   features: { transitions: false },

1. Этот код находится в какой папке/файле?

2. Это страница, расположенная в: pages/_brands/_models/index.vue

3. Горячая замена модуля, кажется, иногда немного глючит. Мне нужно много обновлять страницу, чтобы убедиться, что это не настоящая ошибка.

4. Хотя, если бы вы могли установить v-if=»modelInfo» на main или около того. modelInfo не имеет значения в начале … на самом деле вы должны получить ошибку за это, но другую. Попробуйте это на всякий случай

5. Не стесняйтесь публиковать свой собственный ответ и принимать его.

Ответ №1:

У меня была эта настройка в nuxt.config, потому что она исправила проблему с Google Analytics. Когда эта конфигурация удалена, ошибки нет.

   features: { transitions: false }