Vue create directives

i am trying to implement dbltab and longpress using hammer in vue 3.

the doc and the behavior of directives are not the same.

the doc shows bind/unbind, but it looks like created/destroyed are the new terms.

the doc says I will get a ‘this’ pointer, but don’t at created time.

my directives need mouse interaction, but the method I supplied on the v-press="…" gets called, LONG before the created: directive invocation…

my component

<template>
<ion-content>
  <ion-row  v-for="(row,i) in data[info.Type+'s']" :key="row+'.Name'"
      v-dbltap="addeditClicked(2,i,info.Type,'edit')"
      v-press="deleteRow(i,info.Type)"       >
    <ion-col v-for="(field) in info.Fields" :key="field.Name" :size="field.width" class = " colb  center " @click="setClickedRow(i,info.Type,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: {
    info: { type: Object,
         name: {
           type: String,
           default: function () {
             return 'Sample'
           }
         },
         fields: {
           type: Array,
           default: function() {
             return [{Name: 'Test', width: 10}]
           }
         }
     },
       data: {
         type:Object,
         default: function() {
           return {}
         }
       }
   },

directives:{
    dbltap: {
      created:function(x){
         console.log("dbltap created")
         console.log("parms="+JSON.stringify(this,' ',2))
      },
      bind: function(){
         console.log("dbltap bind called")
      },
      unbind: function(){
         console.log("dbltap unbind called")
      }
    },
    press:{
      created: function(x){
         console.log("press created")
         console.log("parms="+JSON.stringify(this,' ',2))
      },
      unbind: function(){
         console.log("press unbind called")
      }
    },
},

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(mode, row, type, imageName){ console.log("addedit clicked mode="+mode+" type="+type+" returning imagename="+imageName);return imageName},
  deleteRow(x){ console.log("delete row directive called="+x); return},
  setClickedRow(index, type, field){console.log("setClickedRow clicked index="+index+" type="+type+" field="+field); return}
}

}
</script>

and the console log on page initial draw
there should be ONE call to created for press and dbltap for each ion-row
dbltap means edit row, press means delete

getselected clicked type=Tag
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=0
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=1
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=2
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=3
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=4
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=5
ContentComponent.vue?8673:63 dbltap created
ContentComponent.vue?8673:64 parms=undefined
ContentComponent.vue?8673:75 press created
ContentComponent.vue?8673:76 parms=undefined
ContentComponent.vue?8673:63 dbltap created
ContentComponent.vue?8673:64 parms=undefined
ContentComponent.vue?8673:75 press created
ContentComponent.vue?8673:76 parms=undefined
ContentComponent.vue?8673:63 dbltap created
ContentComponent.vue?8673:64 parms=undefined
ContentComponent.vue?8673:75 press created
ContentComponent.vue?8673:76 parms=undefined
ContentComponent.vue?8673:63 dbltap created
ContentComponent.vue?8673:64 parms=undefined
ContentComponent.vue?8673:75 press created
ContentComponent.vue?8673:76 parms=undefined
ContentComponent.vue?8673:63 dbltap created
ContentComponent.vue?8673:64 parms=undefined
ContentComponent.vue?8673:75 press created
ContentComponent.vue?8673:76 parms=undefined
ContentComponent.vue?8673:63 dbltap created
ContentComponent.vue?8673:64 parms=undefined
ContentComponent.vue?8673:75 press created
ContentComponent.vue?8673:76 parms=undefined
HeaderComponent.vue?f983:50 getselected clicked type=Tag
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=0
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=1
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=2
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=3
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=4
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=5

1 post - 1 participant

Read full topic