Vue @click 无效求解

Question

这个点击无效，加不加 native 修饰符，或者 test 后面加不加括号都一样。

这个 p 标签可以点击到，代码也没有语法错误，百思不得其解。

代码如下：

<template>
  <div class="add_wrap">
    <p>新增联系人页面</p>
    <form id="add_contact">
      <div class="avatar_area">
        <p>选择头像</p>
        <input type="file" name="avatar" hidden>
      </div>
      <div class="input_list">
        <p>
          <span class="left">名字</span>
          <input type="text" name="name">
        </p>
        <p>
          <span class="left">手机</span>
          <input type="text" name="mobile">
        </p>
        <p>
          <span class="left">固话</span>
          <input type="text" name="telephone">
        </p>
        <p>
          <span class="left">电邮</span>
          <input type="text" name="email">
        </p>
        <p>
          <span class="left">公司</span>
          <input type="text" name="company">
        </p>
        <p>
          <span class="left">职称</span>
          <input type="text" name="title">
        </p>
        <p>
          <span class="left">传真</span>
          <input type="text" name="fax">
        </p>
      </div>
    </form>
    <p class="add_my_field">添加自定义字段</p>
    <p @click.native="test">测试</p>
  </div>
</template>

<script>
import global_ from "@/components/Global";
export default {
  name: "app-add",
  data() {
    return {
      thisId: undefined,
      preField: global_.preField
    };
  },
  methods: {
    test() {
      console.log(111);

      let form = document.querySelector("#add_contact");
      let now_data = new FormData(form);
      console.log(now_data);
    }
  }
};
</script>

引用了个保存全局常量的组件 Global，但没有实际使用。data 里面的数据也没有使用。用的 vue-cli，编译和运行都没有报错。

Answer 1

你的data能不能展开看一下

补充：
https://codepen.io/anon/pen/q...
我写了个例子，添加native修饰符后点击事件确实不触发了，但是不添加的时候是可以的

Answer 2

把事件修饰符去了试一下,可以看一下.native的用法

Answer 3

首先 .native 一般用于自定义标签 很多框架把原生事件click 禁止了 所有用.native

从代码看console.log(111)是可以输出的 第二个输出 你通过获取dom来操作获取的 需要加$.nextTick来监测dom已经渲染完毕

Answer 4

我复制你的代码试了下，把.native去掉就可以了啊，你这不行么，确定没点错，吧p改成button，不容易看错，再点点看