Get data attribute as object in Vue JS: returning [object object] even with JSON.stringify

Question

I'm trying to use Vue JS to achieve this: click a button with day name as the value, show shop open/close time. my idea is to attach the value in a data-day attribute, and assign the value to the div which displays the open/close time. I have the following code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="OpeningTimes">
        <input type="button" v-for="(value, key) in times" :value="key" :data-day="value" @click="showOpeningTimes">
        <div ref="info"></div>
    </div>
</body>
<script type="module">
    var app = new Vue({
        el: '#OpeningTimes',
        data: {
            times: {
                'Monday': {
                    '09:00': 'open',  // Open
                    '12:20': 'closed', // Close for Lunch
                    '13:30': 'open',  // Return from Lunch
                    '17:00': 'closed' // Close for the day
                },

                'Tuesday': {
                    '09:00': 'open',  // Open
                    '12:20': 'closed', // Close for Lunch
                    '13:30': 'open',  // Return from Lunch
                    '17:00': 'closed' // Close for the day
                }
            }
        },
        methods: {
            showOpeningTimes: function (e) {
                this.$refs.info.innerText = e.target.dataset.day;
            }
        }
    })
</script>

</html>

It seems working cause I can see the "key" in the day object has been bound to the button value, but when I tried to access the data-day attribute in the method, it keeps giving me [object object]. I tried JSON.stringify(e.target.dataset.day), still gave me "[object object]", how can I display the content in the object? What am I missing here?

test_ · Accepted Answer · 2020-01-31 20:20:08Z

4

I think using key to get value in your showOpeningTimes function would be a better aproach. Also you could pass key directly in click binding:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="OpeningTimes">
        <input type="button" v-for="(value, key) in times" :value="key" @click="showOpeningTimes(key)">
        <div ref="info"></div>
    </div>
</body>
<script type="module">
    var app = new Vue({
        el: '#OpeningTimes',
        data: {
            times: {
                'Monday': {
                    '09:00': 'open',  // Open
                    '12:20': 'closed', // Close for Lunch
                    '13:30': 'open',  // Return from Lunch
                    '17:00': 'closed' // Close for the day
                },

                'Tuesday': {
                    '09:00': 'open',  // Open
                    '12:20': 'closed', // Close for Lunch
                    '13:30': 'open',  // Return from Lunch
                    '17:00': 'closed' // Close for the day
                }
            }
        },
        methods: {
            showOpeningTimes: function (key) {
                this.$refs.info.innerText = JSON.stringify(this.times[key]);
            }
        }
    })
</script>

</html>

As it was indicated in another answer, you can also pass value directly. It all depends on whether you need the value itself or the key you will need for something else in your function.

edited Jan 31, 2020 at 20:20

answered Jan 31, 2020 at 20:07

test_

4163 silver badges11 bronze badges

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

1 Comment

one-hand-octopus Over a year ago

Thank you, new to Vue and did not know I could pass key value as a function parameter.

Collectives™ on Stack Overflow

Get data attribute as object in Vue JS: returning [object object] even with JSON.stringify

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related