Как правильно получить данные во Vue?

Question

[Ismail-1]

Добрый вечер!

<template>
    <div>
        {{regions.region1}} //Получаем объект {region: 'name'}
        {{regions.region}} //Пусто
    </div>
</template>

<script>
export default {
    name: "IndexCitySelect",
    data(){
        return {
            region: 'region1',
            regions: {
                region1: {
                    region: "name",
                 },
            },
        }
    }
}
</script>

Вопрос по блоку

{{regions.region1}} Выводится объект
{{regions.region}} //Я ожидаю получить объект, но не чего не выводится, как можно вывести

Answer 1

[Илья Корень]

Вы обращаетесь к свойству объекта, которого нет. У объекта "regions" есть свойство "region1", а у этого объекта тоже есть свойство: "region".
У объекта "regions" нет свойства: "region", к которому вы обращаетесь, у него есть только "region1".
Вы должны обратиться по цепочке: regions.region1.region;