V-onclick evt.target gets the button inside the span; what should I do?

Question

I have a button with a span inside it that is set to run a function v-on:click. I try to pick up the value1 value attached to the button (naming convention aside) by catching it as an evt.

The problem I'm getting is if I click the side of the button it runs as expected. But if I click the span inside it, I can't pick up the value1 because the evt.target is the span.

I'm converting an existing project to Vue, and this isn't the behavior I expected. What is the best way to deal with this?

Thanks!

<button id="touch-button" class="button float-center" value1="19" v-on:click="emit_values">
  <span>19</span>
</button>

emit_values(evt){
    $(evt.target).attr("value1")
}

Answer 1

Apparently this is a generic html/javascript issue.

Solution is here: Missing click event for <span> inside <button> element on firefox

I've changed it to target evt.currentTarger, then used css to add the pointer-events: none; styling to all children of those buttons.