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

[JJ]

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?

[s.molinari]

What exactly are you expecting from the event object?

Scott

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

[JJ]

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

[JJ]

@metalsadman I did it with no success

[s.molinari]

For what purpose? What are you trying to achieve?

Scott

[JJ]

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

[s.molinari]

This is what I’d do.

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

Scott

[JJ]

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

[s.molinari]

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

Scott

[metalsadman]

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

[JJ]

@s-molinari in yours codeplen:

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

These are not q-btn properties like:

 <q-btn  name="btnname", label="btnlabel"
    >

[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