No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    2
    6
    170
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • A
      ak22 last edited by 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
          },
      
      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by metalsadman

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

        A 1 Reply Last reply Reply Quote 0
        • A
          ak22 last edited by

          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.

          1 Reply Last reply Reply Quote 0
          • A
            ak22 @metalsadman last edited by

            @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.

            1 Reply Last reply Reply Quote 0
            • metalsadman
              metalsadman last edited by 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.

              A 1 Reply Last reply Reply Quote 0
              • A
                ak22 @metalsadman last edited by

                @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.

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post