Back

Technologies:

javascriptjavascript
htmlhtml
vue.jsvue.js
reactjsreactjs
typescripttypescript
avatar
Tolerim
a month ago

'Issues encountered while managing button events in a Vue project'

As a beginner in Vue, I'm attempting to create a button click callback function that displays the name of the button that was clicked. Currently, the callback function is executing, but the button name remains undefined.

Here's the HTML code:

<button class="w-32" attr-type="submit" @click="sendClick">btnName</button>
And here's the TS code:

sendClick(event:  React.MouseEvent<HTMLButtonElement>) {     
    if (event) {
        const { target } = event
        if (target){ 
            console.log( ((target as HTMLButtonElement).value));
        }
    } 
}
Can you please review my code and provide feedback?

Here are the sources I'm referring to:

https://vuejs.org/guide/essentials/event-handling.html#inline-handlers

https://microsoft.github.io/PowerBI-JavaScript/interfaces/nodemodulestypedocnodemodulestypescriptliblibdomd.htmlbuttonelement.html#name

https://freshman.tech/snippets/typescript/fix-value-not-exist-eventtarget/

Answers(2)
avatar
Vogi
a month ago
Verified Answer
I see that you are trying to create a button click callback function that displays the name of the button that was clicked. The HTML code you provided is as follows: 
<button class="w-32" attr-type="submit" @click="sendClick">btnName</button>
The TS code you provided is as follows: 
sendClick(event:  React.MouseEvent<HTMLButtonElement>) {     
    if (event) {
        const { target } = event
        if (target){ 
            console.log( ((target as HTMLButtonElement).value));
        }
    } 
}
It seems that the issue is with the value property of the button element. You can try changing the value attribute of the button element to name and then access it in your callback function like this: 
<button class="w-32" attr-type="submit" name="btnName" @click="sendClick">btnName</button>

sendClick(event:  React.MouseEvent<HTMLButtonElement>) {     
    if (event) {
        const { target } = event
        if (target){ 
            console.log( ((target as HTMLButtonElement).name));
        }
    } 
}
I hope this helps! Let me know if you have any other questions.

Sources

3 Ways To Toggle A Button On Click In Vue JS - SoftAuthorThe Vue Button `click` Event - Mastering JSfunction - How to add two methods on a @click event using vue.js ...How to get the value of button when clicked using vue.jsShow Component on Click with vue JS - Stack OverflowEvent Handling | Vue.js
avatar
Tolerim
a month ago
You are trying to get the value of the button, but you have not set a value to it in your HTML code. Instead, you can access the inner text of the button using target.innerText. Here's how you can modify your TS code to achieve this: 
sendClick(event:  MouseEvent<HTMLButtonElement>) {     
    if (event) {
        const { target } = event
        if (target){ 
            console.log(target.innerText);
        }
    } 
}
By using target.innerText, you can access the text within the button and log it to the console when the button is clicked.
;