gpt4 book ai didi

javascript - 在 Vue JS : returning [object object] even with JSON. stringify 中获取数据属性作为对象

转载 作者:行者123 更新时间:2023-12-03 06:43:54 26 4
gpt4 key购买 nike

我正在尝试使用 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>


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

最佳答案

我认为使用 key获取 value在您的 showOpeningTimes功能将是一个更好的方法。你也可以通过 key直接在 click捆绑:

<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您将需要在您的功能中使用其他东西。

关于javascript - 在 Vue JS : returning [object object] even with JSON. stringify 中获取数据属性作为对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60010419/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com