Имеется следующий код:
export default {
name: 'HowToGet',
template: `
<div class="dropdown-button dropdown">
<button class="dropdown-button__button button dropdown-toggle" type="button" id="dropbutton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">Москва</button>
<div id="city-dropdown" class="dropdown-button__wrap dropdown-menu dropdown-menu-right" aria-labelledby="dropbutton1">
<a v-for="city in cities" class="dropdown-button__item dropdown-item" :data-transport="dataTransportToString()" href="javascript:void(0)">{{ city.name }}</a>
</div>
</div>
`,
data() {
return {
cities: [
{
name:'Москва',
dataTransport: {
"\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0442\u0440\u0430\u043d\u0441\u0444\u0435\u0440": "139",
"\u041e\u0431\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442": "141"
},
},
{
name:'Калуга',
dataTransport: {
"\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0442\u0440\u0430\u043d\u0441\u0444\u0435\u0440":"140"
}
}
],
transports: [
{
name: 'Бесплатный трансфер',
dataMapId: "139"
},
{
name: 'Общественный транспорт',
dataMapId: "141"
}
]
}
},
methods: {
dataTransportToString() {
return JSON.stringify(this.dataTransport)
}
},
};
Пытался привести данный объект к строке, но свойство data-transport и его значение не выводятся. Пробовал console.log()
– в консоли выводится undefined
. Где ошибка в указанном коде и как ее исправить?
dataTransport
уthis
?data-transport
должно быть таким"{"\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0442\u0440\u0430\u043d\u0441\u0444\u0435\u0440":"140"}"