Port to Ionic Vue from V3

[sdetweil]

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?

[aaronksaunders]

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

[Ekami]

Same issue here

[sdetweil]

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

[sdetweil]

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

Ion-content not rendering in ion-slide version 4

i have the configurator app, 4 datatypes, 4 pages in a ion-slides, with a slide per data type. it was working on V1, and ok on V3 after updates… now on v4, the slider works, and the header for each slide shows, but the data does not. the data is generated with an ngFor loop, it COULD cause vertical scrolling, only of the data portion , not the header. it took quite a while to get the layout and operations working. popup dialogs over selected rows allow edit or create, or delete… each data ite…

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

[sdetweil]

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…

[sdetweil]

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…

[mhartington]

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

[sdetweil]

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

[mhartington]

Push something to github

[sdetweil]

wasn’t ready for this, but

sdetweil/Config-vue

there u go

install ionic vue
ionic serve

here is V4

sdetweil/MirrorConfig-v4

and V3

sdetweil/MirrorConfig-v3

and V1

sdetweil/MirrorConfig

not a professional programmer

[sdetweil]

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

[sdetweil]

still need help to make the slides full screen

[sdetweil]

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.

[sdetweil]

i now have been able to force my footer to the bottom of the page, using CSS

so, now I need to tell the ionContent in the middle where the footer starts

i am trying to use --padding-bottom or --offset-bottom but I don’t understand what they are supposed to do.

if I set --padding bottom to twice as high as my footer then the ion-content behaves properly, but that makes no sense…

anyone have any experience here…

this is the layout look with --padding=110px, cause the footer is 55px high…

course, once I figure it out, the I will add calcs for this…

–offset-bottom:110px: does nothing, it says -110 for calc bottom, but I don’t see it
I would have expected bottom to move the bottom, and padding to be from the bottom

here is both offset and padding bottom set to 55px; notice that bottom is now 0?!.. maybe this is a bug

[sdetweil]

I had to wrap the ion-content in a div w the correct height