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

    Q-BTN click. How to retrive properties in js?

    Framework
    3
    13
    665
    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.
    • J
      JJ last edited by

      I have a BTN like:

       <q-btn round dense flat icon="send" name="changepassword" @@click="changePassword">
      

      And the method changePassword:

                  changePassword(evt) {
                      let clickedButton= evt.name
                  },
      

      How to get name property (or whatever) form evt?

      metalsadman 1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by

        What exactly are you expecting from the event object?

        Scott

        J 1 Reply Last reply Reply Quote 0
        • metalsadman
          metalsadman @JJ last edited by metalsadman

          @jj log the event object, check on the target property, could also use a vue ref there, or pass a string params on your handler, if you’re just trying to use the name attribute as a flag or something.

          J 1 Reply Last reply Reply Quote 0
          • J
            JJ @s.molinari last edited by

            @s-molinari to get a property from the q-btn (i.e. name), or any way to get it

            1 Reply Last reply Reply Quote 0
            • J
              JJ @metalsadman last edited by

              @metalsadman I did it with no success

              1 Reply Last reply Reply Quote 0
              • s.molinari
                s.molinari last edited by

                For what purpose? What are you trying to achieve?

                Scott

                J 1 Reply Last reply Reply Quote 0
                • J
                  JJ @s.molinari last edited by

                  @s-molinari I need to know the name property of the button has been pressed

                  1 Reply Last reply Reply Quote 0
                  • s.molinari
                    s.molinari last edited by

                    This is what I’d do.

                    https://codepen.io/smolinari/pen/YzpoBdR?editors=1010

                    Scott

                    J 1 Reply Last reply Reply Quote 1
                    • J
                      JJ @s.molinari last edited by

                      @s-molinari Nice, but in this case I have to create my custom properties. How to get natives ones like ‘name’ ?

                      metalsadman 1 Reply Last reply Reply Quote 0
                      • s.molinari
                        s.molinari last edited by

                        Custom properties? What do you mean? Please explain your use case better.

                        Scott

                        J 1 Reply Last reply Reply Quote 0
                        • metalsadman
                          metalsadman @JJ last edited by metalsadman

                          @jj try evt.target.$el.name in your click handler.

                          1 Reply Last reply Reply Quote 0
                          • J
                            JJ @s.molinari last edited by

                            @s-molinari in yours codeplen:

                            const buttons = [
                              {
                                id: 1,
                                color: 'primary'
                              },
                            

                            These are not q-btn properties like:

                             <q-btn  name="btnname", label="btnlabel"
                                >
                            
                            1 Reply Last reply Reply Quote 0
                            • s.molinari
                              s.molinari last edited by s.molinari

                              Hihi… learned something new with this. Vue adds the component instance to an array element in a v-for with refs. So, you have to access the first element of the array to get the underlying component internals. Yet, if you set a ref outside a v-for loop, the instance is directly on the named element of the $refs array. Hmm…

                              Getting back to your challenge… name isn’t a QBtn property. If you add it additionally, it’s an attribute. Check my codepen now, if that is what you are looking for.

                              https://codepen.io/smolinari/pen/YzpoBdR?editors=1010

                              If not, I’d tend to believe you are trying to accomplish something that is not standard practice with Vue. If you’d explain your use case better, we might be able to help you find the right path to a better solution.

                              Scott

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