Question

组件

<template lang="html">
    <div>
        <ul>
            <li @click="GetUser(this);" v-for="chatuser in chatusers" v-bind:data_id="chatuser.User_ID">
            </li>
        </ul>
    </div>
</template>
<script>

    export default {
        methods: {
            GetUser(id) {
                debugger;
                var data_id = $(id)[0].attr("data-id");
            }
        }
    }
</script>
<style>

</style>

问题

在Li，click事件中，有一个函数GetUser（）传递了这个参数。这个元素有data-id属性，我试图在函数中检索它。

问题是，函数中的data_id变量总是未定义的，当我调试js代码时，它显示id值= Window。

我错过了什么吗？

Answer 1

您可以使用$event。并从$event.target.dataset

获取数据属性

对于html属性，标准是使用-代替_

<li @click="GetUser($event);" v-for="chatuser in chatusers" v-bind:data-id="chatuser.User_ID">

export default {
    methods: {
        GetUser(e) {
            var data_id = e.target.dataset.id;
        }
    }
}

演示：https://codepen.io/jacobgoh101/pen/NyveNy

尝试从Laravel中的vue.js组件中检索元素数据属性

1 个答案: