在Vue JS中获取数据属性作为对象:即使使用JSON.stringify也返回[object object]

Vue小助理

124人浏览 · 2022-09-23 14:48:05

Vue小助理 · 2022-09-23 14:48:05 发布

问题:在Vue JS中获取数据属性作为对象:即使使用JSON.stringify也返回[object object]

我正在尝试使用 Vue JS 来实现这一点:单击以日期名称为值的按钮,显示商店开/关时间。我的想法是将值附加到data-day属性中,并将值分配给显示打开/关闭时间的 div。我有以下代码:

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

似乎可行,因为我可以看到 day 对象中的"key"已绑定到按钮值,但是当我尝试访问方法中的data-day属性时,它一直给我[object object]。我试了JSON.stringify(e.target.dataset.day),还是给我“[object object]”,怎么才能显示object里面的内容呢?我在这里想念什么?

解答

我认为使用key在您的showOpeningTimes函数中获取value会是一种更好的方法。您也可以直接在click绑定中传递key:

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

正如另一个答案中所指出的,您也可以直接传递value。这完全取决于您是否需要value本身或key,您将需要在您的功能中使用其他东西。