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
    668
    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.
    • 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