Component list renders component different sizes

Ionic Framework Ionic Vue
1

I’ve got an issue with a Vue component rendering weirdly after a recent rebuild in Ionic.

Here’s what I get. All the Cards used to render below each other. Image sizes are specified in the component and not injected. The cards used to render below each-other before things got really weird in this project.

image
image855×410 74.3 KB

What I’ve done so far

  • I’ve removed all dependencies and re-added everything with ionic repair
  • Ran ionic doctor treat to see if I can get rid of this issue.
  • The previous bug was corruption in the Eslint file.
  • I have not added anything new since things where last working.
  • I ended up bringing in a fresh copy of eslint which solved the continual thread of build errors I got.
  • Been digging for a hours for the reason for this bug. :woozy_face:

I’m inserting BasketListItem in the parent View with

     <ion-item>  
        <BasketListItem v-for="line_item in baskets.line_items" :key="line_item.id"    :lineItem="line_item" />
      </ion-item>

Here’s what the BasketListItem component looks like:

<template>
<div> 
     <ion-card>  
       <ion-card-header>
        <ion-card-subtitle>QTY: <ion-chip>{{ lineItem.quantity }}</ion-chip></ion-card-subtitle>
        <!-- <ion-card-subtitle>InStock</ion-card-subtitle> check if there is enough stock to fulfil order -->
        <ion-card-title><strong>{{ lineItem.name }}</strong></ion-card-title> 
      </ion-card-header>

      <ion-card-content> 
          <ion-item-group>
            <ion-image>
              <img class="productImg" src="https://via.placeholder.com/300">
              <!-- Slider Here -->
            </ion-image>
          </ion-item-group> 
           <ion-item-group>
          <ion-label class="sku">SKU: {{ lineItem.sku }} </ion-label>
          </ion-item-group> 


          <ion-item-group>
          <ion-button size="large" fill="solid" color="primary" @click="addItem">Add (3)</ion-button>
          <ion-button size="large" fill="solid" color="danger" @click="removeItem">Remove (3)</ion-button>
          <ion-button size="large" fill="solid" color="secondary" @click="scan"><ion-icon name="scan"></ion-icon>Scan</ion-button>
        </ion-item-group>

      </ion-card-content>

    </ion-card>
  </div>
</template>

<script lang="ts">
import { IonButton, IonChip, IonCard } from '@ionic/vue';
import EventService from '@/services/EventService.js';
// import { scan } from 'ionicons/icons';
export default {
    name: 'BasketListItem',
    data() {
      return {
        product: [],
      }
    },
    props: {
    lineItem: Object
    },
    components: {
    IonButton,
    IonChip,
    IonCard
    },
    mounted() {
      // console.log(this.lineItem.product_id);
      // const productId = this.$props.lineItem.product_id;
      // console.log(productId);
  
    // EventService.getProduct(id)
    // .then(response => {
    //   this.product = response.data })
    //   .catch(error => {
    //     console.log(error) 
    //     })
    // return {}
  },
}
</script>

<style scoped>
.productImg{
  display: block;
  margin: auto;
  width: 300px;
  height: auto;
}

.sku {
  padding: 6px;
}

</style>
  • Also asked on VueJs Discord as I’m still unsure if this is primarily a VueJS or Ionic error.
2

Found it. Removed the wrapping and everything went back to normal.

It’s quite weird because it’s been working with this syntax for days.

4

I hear you, lots of moving parts just to get to simple results. I’m still learning Ionic’s components.