Variabel tidak terdefinisi dalam komponen halaman Nuxtjs yang dimiliki oleh halaman induk

Saya memiliki dua rute /services dan /services/parents dan setiap halaman disimpan dalam file vue seperti ini:

// Lokasi file : "/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>

dan di halaman /services/parents saya, saya punya:

// Lokasi file : "/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>

Ketika saya menavigasi ke halaman orang tua, saya mendapat kesalahan ini:

service.children tidak ditentukan

Terjadi kesalahan saat merender halaman. Periksa konsol alat pengembang untuk mengetahui detailnya.

Ini hanya terjadi saat bernavigasi dengan <nuxt-link> jika Anda mengetikkan url di alamat browser, itu berfungsi dengan baik. Saya juga memeriksa konsol tetapi tidak ada jejak yang tertulis: Type error: service.children is not defined

Saya menghargai bantuan apa pun sebelumnya


person Amin    schedule 30.01.2019    source sumber
comment
Bagaimana variabel Anda didefinisikan dalam data Anda? Saya ingin melihat dari mana layanan itu berasal, dan apa yang ada di dalamnya   -  person Ferrybig    schedule 02.02.2019
comment
Hai @Ferrybig, saya memperbarui pertanyaannya   -  person Amin    schedule 03.02.2019
comment
Bagaimana variabel data didefinisikan dalam file /pages/services/index.vue?. Harap berikan data respons untuk variabel services ?   -  person Vasu Kuncham    schedule 03.02.2019
comment
bisakah Anda mencoba mengubah baris ini? <template v-if="service && service.children.length">   -  person gleam    schedule 04.02.2019
comment
berpotensi terkait (asyncData vs mengambil) - bisa jadi 1) bahwa navigasi ke nuxt-link tidak mengambil data untuk komponen (periksa toko vuex) 2) bisa juga karena service.children tidak didefinisikan seperti yang disebutkan di atas - oleh karena itu service?.children atau service.hasOwnProperty("children") mungkin bantuan stackoverflow.com/questions/49251437/   -  person Denis Tsoi    schedule 08.02.2019