When a new item is added to list, button within list does not work

ak22

I have been trying to figure this out for days and have tried various things but nothing has worked. I have a list rendered with v-for that contains an embedded q-btn. THe list item contains data from a “group” item (from a list of groups). The list of groups is within a store (state.groups). Each group can have an array of 0 or more members (user ids from the authentication database). I call a function to check whether the member list each group item contains the currently logged in user id. If so, the q-btn’s text is assigned “Leave”. If not, it’s assigned “Join”. If a new group is added to the database, the list is re-rendered as expected and the button initially has a “Join” label. But when I push the button the function that is called that changes the text to “Leave” is never invoked. If I reload the page, everything works and the function is invoked from there on every time and the button text toggles between “Join” and “Leave” as expected. So, why does it not work when a new group is added without having to reload the page? Any help would be appreciated.

This is my template code that is called inside of a v-for

          <q-list
            striped
            v-for="(item) in filteredGroups"
            :key=item.id
          >
   ...
  <q-btn color=primary rounded @click="joinOrLeaveGroup(item)"> {{ isMember(item) }} </q-btn>

This is the function:

   isMember (group) {
      let members = group.members
      let txt = 'Join'
      if (members) {
        if (members.indexOf(this.me.uid) > -1) {
          txt = 'Leave'
        }
      }
      return txt
    },

metalsadman

you probably didn’t set a key in the element you have your v-for. a reproduction pen would be helpful.

ak22

Thanks for the reply. I do have a key (see the edited code in my original post). I think it has to do something with the fact that the new group is dynamically added. So the function that displays the text is not attached to the element because the element (group) did not exist when the page was created. That’s probably why it starts working after the page is reloaded. I tried using a computed property but the problem is I need to pass a parameter (group) and that’s why I used a regular function. The other thing which seems like it should work are render functions to dynamically generate the button but is there simpler solution? I’m sure this use case is fairly common.

ak22

@metalsadman

I came up with a solution. If you notice I am calling an @click handler. I now pass two parameters to it (item and $event). From the event, I can gain access to the src element and set it’s inner html. So now the case where joining a newly added group will toggle the button to “Leave” which was not working previously. For other cases the @click handler and the isMember function will redundantly set the text but it doesn’t seem to cause any problems.

metalsadman

you should head to vue docs and understand this more, using <component /> comes into mind if you’re dealing with dynamic component. what you’re doing is a hack. like i said could’ve helped if you posted a repro.

ak22

@metalsadman
Yes, I realize it’s a hack. I’ll try to post a repro but wasn’t sure how to do that as I’m getting the data from a database, and am using quasar and not just straight vue. I’m fairly new to the web development world. So, still trying to familiarize myself with everything. I’ll follow up soon.