How to properly get data in Vue?

Question

Vue.js

Good evening!

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

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

Question about the block

{{regions.region1}} An object
is displayed {{regions.region}} //I expect to receive an object, but nothing is displayed, how can I output

Answer 1

You are accessing a property of an object that does not exist. The "regions" object has a property "region1" and this object also has a property: "region".
The "regions" object does not have a property: "region" that you are accessing, it only has "region1".
You must go through the chain: regions.region1.region;