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

Question

Component

<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>

Problem

In the Li, on click event, there is a function GetUser() with this argument passed. This element has data-id attribute which I am trying to retrieve in the function.

Problem is that, the data_id variable in the function is always undefined and when I debug the js code, it shows id value = Window.

Am I missing anything?

using this in the template will refer to the Window no matter what. try @click='GetUser(chatuser.User_ID)' (and putting the click event after the v-for loop is started) — LShapz
– LShapz, Commented Feb 14, 2018 at 5:00

Jacob Goh · Accepted Answer · 2018-02-14 09:37:53Z

3

you may use $event. And get the data attribute from $event.target.dataset

And for html attributes, the standard is to use - instead of _

<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;
        }
    }
}

demo: https://codepen.io/jacobgoh101/pen/NyveNy

answered Feb 14, 2018 at 9:37

Jacob Goh

20.9k5 gold badges58 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related