vue.js - VueJS 获取被点击的Button的名称 如果v-on指令在Form标签中

Question

如果 v-on:submit 被放置在表单标签而不是按钮中，是否可以获得被点击的提交按钮名称？

表格

<form method="post" @submit.prevent="getButtonName($event)">
    <input type="submit" name="button1" value="Button1">
    <input type="submit" name="button2" value="Button2">
</form>

脚本

methods: {
    getButtonName(event) {

    }
}

Answer 1

v-on:submit 将不起作用。但是 v-on:click 会。参见@click="handleClick($event)"

<template>
    <div class="hello">
    <form method="post" @click="handleClick($event)" @submit.prevent="getButtonName($event)">
      <input type="submit" name="button1" value="Button1">
      <input type="submit" name="button2" value="Button2">
    </form>
    </div>
</template>

<script>
    export default {
  name: 'hello',
  data () {
    return {

    }
  },
    methods: {
    getButtonName(event) {
            // console.log(event);
    },
    handleClick(e) {
      console.log(e.target.name);

    }
  }
}

</script>

例如 https://codesandbox.io/s/6jwvy6l96k