If anyone is interested this is how i solved it… Also i’m new to Vue.js and Quasar so please give input if there are ways to improve this.
I created a component that houses the mobile view where i copied the Quasar design except for my buttons (v-else)
<template v-slot:item="props">
<div
class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
:style="props.selected ? 'transform: scale(0.95);' : ''"
>
<q-card :class="props.selected ? 'bg-grey-2' : ''">
<q-card-section>
<q-checkbox dense v-model="props.selected" :label="props.row.name" />
</q-card-section>
<q-separator />
<q-list dense>
<q-item
v-for="col in props.cols.filter(col => col.name !== 'desc')"
:key="col.name"
>
<div class="q-table__grid-item-row">
<div class="q-table__grid-item-title">{{ col.label }}</div>
<div class="q-table__grid-item-value" v-if="col.label != 'edit'">
{{ col.value }}
</div>
<div v-else>
<alert-edit-delete :alertId="props.row.id" @handleDelete="handleDelete" />
</div>
</div>
</q-item>
</q-list>
</q-card>
</div>
</template>
<script>
export default {
props: ["props"],
components: {
"alert-edit-delete": require("components/alert/AlertEditDelete.vue").default
},
methods: {
handleDelete(id) {
this.$emit('handleDelete',id);
},
}
};
</script>
The buttons are also a component
<template>
<div class="order-first">
<q-btn
@click.stop=""
flat
round
dense
color="primary"
icon="edit"
class="q-mr-sm"
/>
<q-btn
@click.stop="handleDelete(alertId)"
flat
round
dense
color="red"
icon="delete"
/>
</div>
</template>
<script>
export default {
props: ["alertId"],
methods: {
handleDelete(id) {
this.$emit('handleDelete',id);
},
}
};
</script>
In the table component I import the mobile list
<template v-slot:item="props">
<mobile-alert-list :props="props" @handleDelete="promptToDelete" />
</template>