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

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中，在点击事件中，有一个函数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 组件检索元素数据属性

trying to retrieve element data attribute from vue.js component in Laravel

vue.js

laravel-5.5