VueJS获取单击按钮的名称（如果v-on指令位于Form Tag中）

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