Nuxt генерирует пустые страницы при использовании v-for - PullRequest
Новая
       10

Nuxt генерирует пустые страницы при использовании v-for

0 голосов
/ 11 октября 2019

Мое приложение nuxt отлично работает в dev, но когда я генерирую статические страницы, те, которые содержат v-for =, полностью белые, даже если на странице есть какой-то код при генерации. Это ошибка?

Вот содержимое страницы: 

<template>
  <section class="page">
    <figure v-for="n in 4">
      <picture>
        <source :srcset="require('~/data/' + detail.id + '-' + n + '.jpg?webp')" type="image/webp" />
        <source :srcset="require('~/data/' + detail.id + '-' + n + '.jpg')" type="image/jpeg" />
        <img :src="require('~/data/' + detail.id + '-' + n + '.jpg')" />
      </picture>
    </figure>
  </section>
</template>

<script>
import details from '~/data/details.json'

export default {
  asyncData ({ params }) {
    return { details }
  },
  data () {
    return {
      id: this.$route.params.id,
    }
  },
  computed: {
    detail () {
      return this.details.find(detail => detail.id === this.id)
    }
  }
}
</script>

и .json 

[
  {
    "id": "screen-one"
  },
  {
    "id": "screen-two"
  },
  {
    "id": "screen-three"
  }
]

, а затем. как я сразу понес в этой проблеме, я вручную добавил URL-адреса в nuxt.config.js 

  generate: {
    routes: [
      '/screen-one',
      '/screen-two',
      '/screen-three'
    ]
  },

Изображения (например, screen-one-1.jpg) находятся в папке данных.

Страница называется _id.vue

...