Component list renders component different sizes

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.

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

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

Here’s what the BasketListItem component looks like:

        <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>{{ }}</strong></ion-card-title> 

              <img class="productImg" src="">
              <!-- Slider Here -->
          <ion-label class="sku">SKU: {{ lineItem.sku }} </ion-label>

          <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>



<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: {
    mounted() {
      // console.log(this.lineItem.product_id);
      // const productId = this.$props.lineItem.product_id;
      // console.log(productId);
    // EventService.getProduct(id)
    // .then(response => {
    //   this.product = })
    //   .catch(error => {
    //     console.log(error) 
    //     })
    // return {}

<style scoped>
  display: block;
  margin: auto;
  width: 300px;
  height: auto;

.sku {
  padding: 6px;

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

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.

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