Vue 3中无法获取按钮data属性值的问题求助

问题根源 #

你的代码存在两个核心问题：

• 点击事件绑定的方法名不匹配：按钮上写的是v-on:click="start"，但Vue实例中定义的方法是startChat，导致点击时并未触发正确的方法。
• 动态绑定属性的冗余使用：:data-id="19876"是动态绑定语法，这里的19876会被当作数字处理，虽然不影响最终dataset的读取，但静态值没必要用动态绑定。

修正后的代码 #

按钮部分

<script src="https://unpkg.com/vue@3.4.9/dist/vue.global.js"></script>

<button id="profile"
        v-on:click="startChat" data-id="19876"
        class="profile"
        data-gender="{{gender}}">
</button>

Vue实例部分

<script>
Vue.createApp({
    data() {
        return {
            state: null,
            gender: 'male' // 示例gender值，根据实际情况替换
        };
    },
    mounted() {
        console.log(this);
    },
    methods: {
        startChat(event){
            // 方法1：使用dataset
            const { id, gender } = event.currentTarget.dataset;
            console.log('dataset获取值：', id, gender);
            
            // 方法2：使用getAttribute
            const dataId = event.currentTarget.getAttribute('data-id');
            const dataGender = event.currentTarget.getAttribute('data-gender');
            console.log('getAttribute获取值：', dataId, dataGender);
        },
    }
}).mount('#profile');
</script>

关键说明 #

• 优先使用event.currentTarget而非event.target：确保获取的是绑定点击事件的按钮本身，避免按钮内部有子元素时target指向子元素导致的错误。
• 静态自定义属性直接写data-xxx="值"即可，只有当值是Vue响应式变量时才需要用:data-xxx="变量名"。
• 模板插值使用Vue的标准语法：如果gender是Vue实例data中的属性，直接写{{gender}}即可，无需加$前缀。

内容的提问来源于stack exchange，提问作者paul kendal23