WhenVisible - Inertia2

Hello

I have upgraded to Inertia2 on my Vue3 - Laravel project.

When I try to implement the WhenVisible feature.

      <template :key="index" v-for="(product, index) in products">
        <WhenVisible data="product">

        <product-tile v-if="product" :product="product" />
        </WhenVisible>  
      </template>

I get this error

TypeError: Cannot read properties of undefined (reading 'component')

Niush

1 year ago

Level 50

It does not work like that. WhenVisible accepts the prop name. You cannot apply that to each product item one by one. You need:

<WhenVisible data="products">
    <template #fallback>
        <div>Loading Products...</div>
    </template>

    <div :key="index" v-for="(product, index) in products">
        <product-tile :product="product" />
    </div>
</WhenVisible>

mvinayakam_laravel

1 year ago

Level 1

@Niush Thanks

I fixed that later and still facing a similar issue

<template>
  <WhenVisible data="products">
    <div>
      <section id="plp-grid" class="bg-white block w-full" v-if="products">
        <ul
          class="list grid grid-flow-dense gap-x-1 gap-y-1 md:gap-x-3 md:gap-y-3 grid-cols-2 lg:grid-cols-3 md:pl-0 w-full my-0 mx-auto max-w-screen-1xl pl-1 list-none"
        >
          <template :key="index" v-for="(product, index) in products">
            <product-tile v-if="product" :product="product" />
          </template>
        </ul>
      </section>
      <section id="plp-grid" class="bg-white block w-full" v-else>
        <p>Sorry, no products match this criteria</p>
      </section>
    </div>
  </WhenVisible>
</template>

Please or to participate in this conversation.