Я новенький для Vue и Vuetify. Я пытаюсь использовать v-slot для клиентской строки по умолчанию https://vuetifyjs.com/en/components/data-tables#customizing -default-rows . У меня есть некоторые очень специальные данные c, их ключ / имя - дата. Мой вопрос заключается в том, как связать данные с именем «2019-01» с v-slot, например v-slot: item.2019-01 = {'item'} (есть ошибка). Я пытаюсь использовать v-slot: item ['2019-01'], но он не работает. Спасибо.
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-slot:item.calories="{ item }">
<v-chip :color="getColor(item.calories)" dark>{{ item.calories }}</v-chip>
</template>
</v-data-table>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: '2019-01' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
'2019-01': 300,
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
'2019-01': 500,
}
],
}
},
methods: {
getColor (calories) {
if (calories > 400) return 'red'
else if (calories > 200) return 'orange'
else return 'green'
},
},
})