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?

you cannot have multiple ion-content tags in the template… also in the future, it is important to show the script section, specifically the imports and the components

Same issue here :frowning:

here is my start at the page with components, this is the Tab1.vue page of the sample app.

<template>
  <ion-page>
   <ion-slides loop="true" id="loopSlider">
        <ion-slide width="100%"  >
        <!--  <Header  :name="viewerHeaderName" :fields="viewerHeaderFields"></Header> -->
          <Content :name="viewerHeaderName" :fields="viewerHeaderFields" :data=data></Content>
        <!-- <Footer></Footer> -->
        </ion-slide>
      </ion-slides>
  </ion-page>
</template>

<script>

import { IonPage, IonSlide, IonSlides, } from '@ionic/vue'; //IonRefresher, IonSlide, IonSlides, IonContent,  IonRow, IonCol , IonList, IonItem,
/*import Footer from '../components/FooterComponent.vue'
import Header from '../components/HeaderComponent.vue' */
import Content from '../components/ContentComponent.vue'


export default{
  name: 'Tab1',
  components: { IonPage,  IonSlide, IonSlides,  /*Footer,Header,*/ Content}, //IonRefresher, IonContent,  IonRow, IonCol , IonList, IonItem,

data(){
  return {
   viewerHeaderName: 'Viewer',
   viewerHeaderFields: [{Name:'Name',width:4},
                        {Name:'Tags',width:3},
                        {Name:'Advance',width:2},
                        {Name:'ImageRefreshRate',width:1},
                        {Name:'Active',width:2}
                        ],
   datasourceHeaderName: 'DataSource',
   datasourceHeaderFields: [{Name:'Name',width:3},
                        {Name:'Type',width:2},
                        {Name:'Active',width:2},
                        {Name:'Root',width:5}
                        ],
   imageHeaderName: 'Image',
   imageHeaderFields: [{Name:'Name',width:3},
                        {Name:'Tags',width:3},
                        {Name:'Source',width:3},
                        {Name:'Path',width:3}
                        ],
   tagHeaderName: 'Tag',
   tagHeaderFields: [{Name:'Value',width:4},
                     {Name:'Description',width:8}
                    ]
   }
},

setup(){

  const adatasource={Name:'datasource name',Type:{Type:" local"}, Active: true,Root:"/",id:9};

  const aimage={Name:"image",id:11, Tags:[42,62],Source: 9, Path:"/somepath"};

  const data = {  Viewers: [{Name:"viewer1",id:1, Advance:5, Tags:[12,22,32], ImageRefreshRate: 10, Active:false},{Name:"viewer2",id:2,Advance:5, Tags:[42,52,62], ImageRefreshRate: 10, Active:false}],
                  DataSources: [adatasource],
                  Images: [aimage],
                  Tags: [{ Value:"tag1", id:12,Description:"tag 1"},{ Value:"tag2", id:"22",Description:"tag 22"},{ Value:"tag3", id:32,Description:"tag 32"},{Value:"tag4", id:42,Description:"tag 42"},{ Value:"tag5", id:52,Description:"tag 52"},{ Value:"tag6", id:62,Description:"tag 62"}]
               };

  return { data };
}
}
</script>

</script>

the ContentComponent looks like this

<template>
<ion-content>
  <ion-row  v-for="(row,i) in data[name+'s']" :key="row+'.Name'"
      @dbltap="addeditClicked(2,i,name,'edit')"
      @press="deleterow(i,name)"       >
    <ion-col v-for="(field) in fields" :key="field.Name" :size="field.width" class = " colb  center " @click="setClickedRow(i,name,field.Name)" >
      <ion-list v-if="field.Name=='Tags'"  >
        <ion-item v-for="(id,i) of row[field.Name]" :key="i" class = " colb  center ">
        {{tagfromID(id)}}
        </ion-item>
      </ion-list>
      <ion-list v-else-if="field.Name=='Type'">
        <ion-item v-for="(id,i) of row[field.Name]" :key="i" class = " colb  center ">
          {{id}}
        </ion-item>
      </ion-list>
      <span v-else>
        <span v-if="field.Name=='Source'" class = " colb  center ">
         {{datasourcefromID(row[field.Name])}}
        </span>
        <span v-else class = " colb  center ">
           {{row[field.Name]}}
        </span>
      </span>
    </ion-col>
  </ion-row>
</ion-content>
</template>

<script >
import { IonContent,  IonRow, IonCol,IonList, IonItem } from '@ionic/vue';


export default{
  name: 'Content',
  components: {  IonContent,  IonRow, IonCol ,  IonList, IonItem },
  props: {
       name: {
         type: String,
         default: function () {
           return 'Sample'
         }
       },
       fields: {
         type: Array,
         default: function() {
           return [{name: 'Test', width: 10}]
         }
       },
       data: {
         type:Object,
         default: function() {
           return {}
         }
       }
   },

methods:{
  tagfromID (x){
      for(const tag of this.data.Tags){
         if(tag.id == x) {
           return tag.Value
         }
      }
      return x+' not found'
  },
  datasourcefromID (x){ console.log("datasource fromid clicked ="+x);
        for(const datasource of this.data.DataSources){
         if(datasource.id == x)
           return datasource.Name
      }
      return x+' not found'
  },
  addeditClicked(x){console.log("addedit clicked type="+x); return false},
  deleteRow(){ return},
  setClickedRow(index, type, field){console.log("setClickedRow clicked index="+index+" type="+type+" field="+field); return}
}

}
</script>

take out the ionSlides/IonSlide tags from the top template and you get a nice display.
with them present, the data is in the dom, but not shown , AND also considered VERTICAL

this is a topic about my port from V3 to V4 for my app… slides inside of content with secondary content

now… i added the display:block to the slide and have the data under the header, but no footer, just like before…

<template>
  <ion-page>
    <ion-slides>
        <ion-slide class="theroot" style="display:block; width:100%">
          <Slide :info="tagFields" :data=data></Slide>
        </ion-slide>
    </ion-slides>
  </ion-page>
</template>

but the content is not full width
here is slides, with slide

so, I added the ion-content back

<template>
  <ion-page>
    <ion-content>
    <ion-slides height="100%" style="display:block;">
        <ion-slide style="display:block;" width="100%" height="100%" >
          <Slide :info="tagFields" :data=data></Slide>
        </ion-slide>
    </ion-slides>
    </ion-content>
  </ion-page>
</template>

and now I have full width, and content back, but lost the height…

v-for for the slides works, (if u put the v-for on the right tag!)…

so, only have the page size issue to solve…

Please share a demo instead of posting screenshots. What do you have

how do I share a demo?
its the startup app with some new pages and components.

Push something to github

wasn’t ready for this, but

there u go

install ionic vue
ionic serve

here is V4


and V3

and V1

not a professional programmer

u asked for something runnable to look at, i have supplied same.

still need help to make the slides full screen

ok, this is my last functional stumbling block

i have slide east/west scroll
on each slide, template I have a header, fixed at the top
a content area
and a footer (I want fixed at the bottom of the page)

the content area should be north/south scrollable inside between the header and the footer, should there be more content than can be displayed on this device, in this orientation.

right now I have NO Ion-Content tag in use

I ‘want’ to put it around the grid in the content component.