CODEWITHSUNDEEP
javascripthtmlvue.jsobject
one-hand-octopus
one-hand-octopus

Reputation: 2743

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

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?

Upvotes: 2

Views: 1674

Answers (1)

test_
test_

Reputation: 416

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.

Upvotes: 4

Related Questions