Неопределенная переменная в компоненте страницы Nuxtjs, который принадлежит родительской странице

У меня есть эти два маршрута /services и /services/parents, и каждая страница хранится в файле vue следующим образом:

// Местоположение файла: "/pages/services/index.vue"

<tr v-for="service in services" :key="service.id">
  <td class="check-col"><input type="checkbox"></td>
  <td class="number-col">{{ service.id }}</td>
  <td>{{ service.name }}</td>
  <td>{{ service.slug }}</td>
  <td>
    <template v-if="service.children.length">
      <template v-for="(child, index) in service.children">
        <nuxt-link :to="'/admin/services/' + child.id" :key="child.id">
          {{ child.name }}
        </nuxt-link>

        <span :key="child.id" v-if="(index+1) < service.children.length">, </span>
      </template>
    </template>

    <span v-else>--</span>
  </td>
</tr>

и на моей странице /services/parents у меня есть:

// Местоположение файла: "/pages/services/parents.vue"

<tr v-for="service in services" :key="service.id">
  <td>{{ service.id }}</td>
  <td>{{ service.name }}</td>
</tr>

<script>
export default{
  computed: {
    services() {
      return this.$store.getters['content-lists/services/list']
    }
  },
  async fetch({ store, query }) {
    let page = Number(query.page) || 1
    let perPage = Number(store.getters['content-lists/services/perPage'])
    let offset = (page - 1) * perPage

    const max = await strapi.request('get', '/services/count')
    store.commit('content-lists/services/setMaxPages', max)

    store.commit('content-lists/services/empty')
    const response = await strapi.request('post', '/graphql', {
      data: {
        query: `query {
          services(limit: ${perPage}, start: ${offset}) {
            id
            name
            slug
            children {
              id
              name
            }
          }
        }`
      }
    })

    response.data.services.forEach((service) => {
      store.commit('content-lists/services/add', {
        id: service.id || service._id,
        ...service
      })
    })
  }
}
</script>

Когда я перехожу на страницу родителей, я получаю эту ошибку:

service.children не определен

Произошла ошибка при рендеринге страницы. Подробности смотрите в консоли инструментов разработчика.

Это происходит только при навигации с помощью <nuxt-link>, если вы вводите URL-адрес в адрес браузера, он работает нормально. Я также проверил консоль, но следов нет, просто написано: Type error: service.children is not defined

Я ценю любую помощь заранее


person Amin    schedule 30.01.2019    source источник
comment
Как вы определяете переменные в ваших данных? Я хочу увидеть, откуда берется сервис и что внутри   -  person Ferrybig    schedule 02.02.2019
comment
Привет @Ferrybig, я обновил вопрос   -  person Amin    schedule 03.02.2019
comment
Как переменная данных определена в /pages/services/index.vue файле?. Предоставьте данные ответа для переменной services ?   -  person Vasu Kuncham    schedule 03.02.2019
comment
не могли бы вы попробовать изменить эту строку? <template v-if="service && service.children.length">   -  person gleam    schedule 04.02.2019
comment
потенциально связано (asyncData vs fetch) - может быть 1) переход к nuxt-link не извлекает данные для компонента (проверьте хранилище vuex) 2) также может быть то, что service.children не определен, как указано выше, поэтому service?.children или service.hasOwnProperty("children") может help stackoverflow.com/questions/49251437/   -  person Denis Tsoi    schedule 08.02.2019