Я пытаюсь использовать 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" в объекте дня, который был привязан к значению кнопки, но когда я попытался получить доступ к атрибуту data-day в метод, он продолжает давать мне [object object]. Я попытался JSON.stringify(e.target.dataset.day), все еще дал мне «[объект объекта]», как я могу отобразить содержимое в объекте? Что мне здесь не хватает?