laravelvue.jsvuejs3

Vue JS Unable to get values of data attributes


I am using Vue 3 . I am unable to get dataset values from my button:

this is the button:

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

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

This is my vue object:

<script>
        Vue.createApp({
            data() {
                return {
                    state: null,
                };
            },
            mounted() {
                console.log(this);
            },
            methods: {
                startChat(event){
                    //  const { id } = event.target.dataset;
                    var id = event.target.getAttribute('data-id');
                    console.log(id);
                },
            }
        }).mount('#profile');

    </script>

This return the value null.

I also tried this:

const { id } = event.target.dataset;

It return value undefined.


Solution

  • You're mounting Vue directly on the #profile button, but Vue works best when mounted on a wrapper element (for example a <div>) that contains the button. Since the button itself is the root of the Vue instance, Vue takes over and removes the data-* attributes, which is why you're not getting the expected values.

    To fix it, wrap your button inside a and mount Vue on that div instead.

    <script src="https://unpkg.com/vue@3.4.9/dist/vue.global.js"></script>
    
    <div id="app">
        <button id="profile"
             v-on:click="startChat" 
             :data-id="19876"
             class="profile"
             data-gender="male">
            Click Me
        </button>
    </div>
    
    <script>
        Vue.createApp({
            methods: {
               startChat(event){
               //  const { id } = event.target.dataset;
               var id = event.target.getAttribute('data-id');
               console.log(id);
            },
               }
        }).mount('#app'); // Mount Vue here
    </script>
    

    Read more about mounting Vue on the official docs