使用“this”关键字的函数参数和参数在 vuetify 项目中不起作用？答案

【问题标题】：Function arguments and parameters not working in vuetify project using "this" keyword?使用“this”关键字的函数参数和参数在 vuetify 项目中不起作用？
【发布时间】：2019-10-10 13:30:41
【问题描述】：

我正在尝试在 vuetify 项目中完成一些事情，如下例所示，它适用于纯 html/javascript：

<body>
  <button id="anid" onclick="idcheck(this.id)">
  </button
</body>
<script>
  function idcheck(id){
    console.log(id);
  }
</script>

但是在我的 vuetify 项目中，当我尝试完成如下所示的相同类型的事情时，我收到“无法读取 null 的属性 'id'”的控制台错误：

<v-btn id="price" flat small @click="idcheck(this.id)">Price</v-btn>

methods: {
  idcheck(id){
    alert(id);
}

有没有办法用这种方法获取 .v-btn 元素的 id 或者这在 vuetify 项目中是不可能的？

编辑： 问题在于我在按钮@click 中放置了两个函数，我不明智地在示例中没有说明。接受的答案有效。

【问题讨论】：

标签： function vue.js button click vuetify.js

【解决方案1】：

您可以将id保存在数据中：


<v-btn :id="btnId" flat small @click="idcheck(btnId)">Price</v-btn>


<script>
export default {
  data:()=>{
      btnId:'price'
  },
  methods: {
    idcheck(id){
    alert(id);
  }
}

</script>

【讨论】：

【解决方案2】：

有没有办法用这种方法获取.v-btn元素的id...

有，但我想知道当您可以通过引用轻松访问对象本身（按钮）时，您打算如何处理它。

<v-btn id="price" flat small @click="idcheck">Price</v-btn>

{
  // ...

  methods: {
    idcheck(e) {
      const button = e.target;
      const id = button.id; // price

      // ...
    }
  }
}

【讨论】：

我有 4 个按钮，理想情况下它们会根据它们是“活跃”还是被点击而获得或失去一个类。我尝试了你的建议，但我得到““点击”的事件处理程序中的错误：“TypeError：无法读取 null 的属性 'target'”。
@MylesMalloy 你能用最新的尝试更新你的问题吗？最好有验证问题所需的一切，因为它确实对我有用。
今天早上我又试了一次，发现问题是我在点击中添加了两个功能，在我的示例中我不明智地忽略了它们。所以如果它是唯一的功能，这确实有效。