q-btn组件自定义属性role-id取值返回null，如何解决？

问题原因 #

q-btn是Quasar封装的组件，点击事件的e.target指向的是组件内部实际触发点击的元素（比如图标、按钮内部的span标签），而非q-btn本身，因此找不到你绑定的role-id属性。

解决方案 #

1. 使用currentTarget替代target

currentTarget始终指向绑定事件的元素（即q-btn组件本身），修改点击事件代码即可：

const editRole = (e) => {
  console.log(e.currentTarget.getAttribute('role-id'));
}

2. 直接传递role.id作为点击事件参数（推荐）

这是更符合Vue开发习惯的方式，无需操作DOM获取属性：

<q-btn @click="editRole(role.id)" round color="primary" icon="edit" />

const editRole = (roleId) => {
  console.log(roleId);
}

3. 使用符合HTML规范的data-*属性

HTML自定义属性建议以data-为前缀，Vue中绑定后可通过dataset快速获取：

<q-btn @click="editRole" :data-role-id="role.id" round color="primary" icon="edit" />

const editRole = (e) => {
  // 两种获取方式均可
  console.log(e.currentTarget.getAttribute('data-role-id'));
  console.log(e.currentTarget.dataset.roleId); // dataset会自动将连字符属性转为驼峰命名
}

内容的提问来源于stack exchange，提问作者Mishen Thakshana