Vue按钮点击无法获取并打印id与name值，求问题排查

问题根源 #

• 重复绑定点击事件导致首次点击无输出：你已经通过Vue的@click绑定了addNewEntry方法，在方法内部又用原生JS给按钮新增了一个click事件监听器。第一次点击按钮时，只会执行监听器的添加逻辑，不会触发刚绑定的监听器，因此没有日志输出；只有第二次及之后点击，才会触发这个新增的监听器打印内容。
• 写法不符合Vue设计思路：Vue提供了更简洁的属性获取方式，无需使用原生document.getElementById和addEventListener，这种冗余写法容易引发事件绑定混乱。

正确写法示例 #

方式1：通过事件对象直接获取属性

<v-btn id="mytest" name="test" @click="addNewEntry">{{'add '}}</v-btn>

methods: {
  addNewEntry(event) {
    console.log('id value ', event.target.id);
    console.log('name value ', event.target.name);
  },
}

Vue会自动将事件对象作为参数传递给绑定的方法，直接接收event即可获取触发元素的属性。

方式2：使用Vue的ref获取元素（适合需直接操作元素的场景）

<v-btn ref="myBtn" id="mytest" name="test" @click="addNewEntry">{{'add '}}</v-btn>

methods: {
  addNewEntry() {
    const btn = this.$refs.myBtn;
    console.log('id value ', btn.id);
    console.log('name value ', btn.name);
  },
}

给按钮添加ref属性后，可通过this.$refs直接获取元素实例，更符合Vue组件化开发的规范。

内容的提问来源于stack exchange，提问作者nidhou gsm