Port to Ionic Vue from V3

I have this mobile app in Ionic 3/angular, which I am trying to port to Ionic Vue. (some changes already made)
which uses

<ion-page>
<ion-content @ionFocus="focusChanged('focus')" @ionBlur="focusChanged('blur')">
<ion-slides loop="true" id="loopSlider">
  <ion-slide class="theroot" width="100%"  >
  <ion-header>
 <ion-toolbar>
  <ion-row>
    <ion-col size="1">
      <button ion-button icon-only @click="addeditClicked(1,getselectedRow('viewer'),'viewer',{true:'add',false:'edit'}[getselectedRow('viewer')<0])">
        <ion-icon name="getselectedRow('viewer')<0 ? 'md-add':'md-search'"></ion-icon>
      </button>
    </ion-col>
    <ion-col size="10" >Viewers</ion-col>
    <ion-col size="1">
      <button ion-button  icon-only @click="menu()">
        <ion-icon name="md-menu"></ion-icon>
      </button>
    </ion-col>
   </ion-row>
</ion-toolbar>
 <ion-toolbar>
  <ion-row>
    <ion-col size="4" class=" center">Name</ion-col>
    <ion-col size="3" class=" center">Tags</ion-col>
    <ion-col size="2" class=" center">Advance</ion-col>
    <ion-col size="1" class=" center">Rate</ion-col>
    <ion-col size="2" class=" center">Active</ion-col>
  </ion-row>
 </ion-toolbar>
  </ion-header>
<ion-content >
  <ion-row  v-for="(viewer,i) in data.Viewers" :key="viewer.id"
      @dbltap="addeditClicked(2,i,'viewer','edit')"
      @press="deleterow(i,'viewer')"
       >
    <ion-col  size="4"  @click="setClickedRow(i,'viewer','Name')">{{viewer.Name}}</ion-col>
    <ion-col  size="3" class="colb   center" @click="setClickedRow(i,'viewer','Tags')">
       <ion-list >
         <ion-item no-lines class="center tag-background-transparent"  v-for="tag in viewer.Tags" :key="tag.id" >{{tagfromID(tag)}}</ion-item>
       </ion-list>
    </ion-col>
    <ion-col size="2" class = " colb  center " @click="setClickedRow(i,'viewer','Advance')">{{viewer.Advance}} </ion-col>
    <ion-col size="1" class = " colb  center" @click="setClickedRow(i,'viewer','RefreshRate')">{{viewer.ImageRefreshRate}}</ion-col>
    <ion-col size="2" class = "col colb  center" @click="setClickedRow(i,'viewer','Active')">{{viewer.Active}}</ion-col>

  </ion-row>
</ion-content>
  </ion-slide>

this repeats for 3 other slides

the data for the ion-rows v-for is present in the dom, the v-for worked… BUT the size of the ion-content is 0h/w
so nothing will be displayed.

this app has worked on android and ios fine since V1. and the statement of 1 ion-content per ‘view’ has been the same.

if I remove either ion-content the data is shown, but the rows are created to the right of the header. and the columns are shown vertically

I really want left/right swipe for navigation (this app configures the 4 data items used in a server app)
it auto discovers the server (udp broadcast) and uses server rest apis to get the data from the mongo db
i have buttons for left/right too (as it didn’t work on PC web page)

if I have all 4 slides in the template, i get all 4 slides presented, and swipe works, but… no data is shown on any page, the data IS in the dom, just the ion-content sections have 0 size…

also, I added a directive to get double click and press events… is that the same here, or does vue provide anything?

3 posts - 3 participants

Read full topic