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

Question

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

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

但是在我的 vuetify 项目中，当我尝试完成如下所示的相同类型的事情时，我收到控制台错误 "Cannot read property 'id' of null":

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

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

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

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

Answer 1

您可以将id保存在data中：


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


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

</script>

Answer 2

Is there a way to get the id of the .v-btn element with this sort of method...

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

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

{
  // ...

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

      // ...
    }
  }
}

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

Function arguments and parameters not working in vuetify project using "this" keyword?

function

click

button

vue.js

vuetify.js