@andrei94ro found this solution:

//template

'<div @click="parentClick" @dblclick="parentDblClick">
  <q-popup-edit></q-popup-edit>
</div >
'

 //setup
return {
  parentDblClick:(e)=>{

       //emit "click" event  with payload
       e.target.dispatchEvent(new CustomEvent("click", {detail: 
      {trigger:true}}))

    },

     parentClick:function (e, open){
                        
        //check payload and stop in current 
             if(!e.detail?.trigger) e.stopPropagation()
                    
                        //keep event propagating on parent
                         e.target.parentNode.dispatchEvent(new Event("click"))


            },

}

@dobbel this would be possible if the event is passed, but in quasar 2 there is no event…

The simplest way is giving a long pattern like:
{
mask: “###.###.###.###.###.###.###.###,##”,
reverse-fill-mask: true,
}

@dobbel What part specificly? For exemple, I just created a plugin to translate a site easily with Polylang and Oxygen builder. So in the backend, on the post (any where I used Oxygen Builder ) I create an interface to generate and array of translations.

I could use vue and some other component library, but with quasar, with the auto-import, it’s faster to build the interface.

So, I create an app inside the plugin and I use ajax to save the data to wordpress.

On development I use the localhost devserver and on production I build the app and load js, css and assets with wp (admin_enqueue_scripts hook) and just build it on a #q-app div. I don’t use the html from quasar.

I don’t know if this answers your question.

Hi, I’m using the CLI to create plugins for wordpress faster. But when I load the styles on backend of wordpress, some wordpress components get affected.

How can I apply the quasar default styling ONLY under #q-app div.

So with sass my idea would be something like this:

#q-app
   //...all the quasar styling

I know I can do this with my own classes, but not how to do it with default quasar styling.

Thanks!

@dobbel No, I couldn’t solve it.

What makes not to reload all the images? maybe somebody has an answer to this and I can solve it faster… Or any body knows some tutorial?

Thanks again

https://www.loom.com/share/a12017a8a5e74203a308b39f13a143d9

I tried to do it with a “for in” to avoid to change the posts already created, but still happening the same

for (const key in newPosts) {
if (newPosts.hasOwnProperty(key)) {
const newPost = newPosts[key]
state.get.posts[key] = newPost
}
}

I have my home page with :

<item-list :passedPosts=“posts”>
</item-list>

posts is a computed property that gets from the store:

computed:{
posts(){
//console.log('store ', this.$store)
return this.$store.state.http.get.posts
},
}

then a list component getting the posts from another computed passed from the properties:

<template v-else-if="$sal.objLen(posts)">
<q-infinite-scroll @load=“onLoad” :offset=“250” class=“fit row wrap justify-start content-start text-center”>

      <single-item v-for="(post, index) in posts" :key="index" :passedItem="post"  class="q-mb-md"></single-item>
       
   
      <template v-slot:loading  >
          <div class="row justify-center q-my-md ">
            <q-spinner-tail
              color="primary"
              size="5em"
            />
           
          </div>
        </template>
      <div class="q-pa-lg flex flex-center full-width">
        
        <q-pagination v-if="0 == 1" :direction-links="true" :max="5" :value="params.page" @input="changePage($event, 'page')">
        </q-pagination>
         <template v-if="$sal.objLen($store.state.http.get.last) == 0 ">
            No more posts Found
          </template>
      </div>
        
       </q-infinite-scroll>

   </template>

computed:{
posts(){
return this.passedPosts
}
},

and finally the the single item component that gets the post from the v-for using the id of the post as a key (it’s a string id from firebase). And a computed property item to get data from property “itemPassed” from parent list component

computed :{

  item(){

    
    var newItem = this.passedItem
    if(this.$store.state.auth.currentUser){
      var user = this.$store.state.auth.currentUser
      var user_id = user.uid
    }


    if(typeof newItem.likes != 'undefined'  && typeof newItem.likes[user_id] != 'undefined'){
     //console.log('user uid', user_id )
     //console.log(newItem.likes[user_id] )

      newItem.userLikes = newItem.likes[user_id]

    }
    
    var item = {
      ...this.itemDefault,
      ...newItem
    }
    item.rating = item.rating / 2

    return item

  },
  loadingPosts(){
            return this.$store.state.http.get.loadingPosts
        }
},

Sure, I have this code below.
////////
Vuex
/////////
/*
action
*/
export function getPosts ({commit, state}) {
var params, posts

commit(‘startLoadingPosts’, true)

 params = state.get.params

posts = {}

params = encodeURIComponent(JSON.stringify(params))

baseAxios.get(
    `${state.get.url}/posts?params=${params}`
  )
    .then( response =>{
      posts =  response.data

      commit('updatePosts', posts)
    })
    .catch( err =>{

      
      commit('setResponse', err )
     
    }).then(()=>{
      commit('startLoadingPosts', false)
    })

}

/*
Mutation
*/
export function updatePosts (state, obj) {

state.get.snapshot=  obj.snapshot
state.get.last = obj.posts;

//console.log(‘new posts’, obj)

 state.get.posts =  {...state.get.posts, ...obj.posts} 

}

the posts are an object and to join them I use the spread operator, it may be this? because I’m creating a new object?

Thanks for the reply!

Hi, I’m using vuex, and I have a list of post with an infinite scroll component. Problem is that every time vuex is updated it reloads all images in the list. How I can avoid to reload all images each time onLoad() runs?