How to write a function to change content in another block (Vue.js)?

Question

Vue.js

There is the following code:

export default {
    name: 'HowToGet',
    template: `
    <section class="how-to-get" id="how-to-get">
    <div class="container">
        <h3 class=" h3 how-to-get__head">Как добраться</h3>
        <div class="row">
            <div class="col-xl-5">
                <div class="how-to-get__dropdown-wrap">
                    <div class="how-to-get__dropdown-title">Откуда выезжаете?</div>
                    <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 class="dropdown-button__item dropdown-item" data-transport=""
                             href="javascript:void(0)" v-for="city in cities" @click="changeMap">{{ city.name }}</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-7">
                <div class="how-to-get__dropdown-wrap how-to-get__dropdown-wrap_right">
                    <div class="how-to-get__dropdown-title">На чем выезжаете?</div>
                    <div class="dropdown-button dropdown">
                        <button class="dropdown-button__button button dropdown-toggle" type="button" id="dropbutton2" 
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">Бесплатный трансфер</button>
                        <div v-for="city in cities" id="transport-dropdown" class="dropdown-button__wrap dropdown-menu dropdown-menu-right" aria-labelledby="dropbutton2">
                            <a v-for="transport in city.transport" class="dropdown-button__item dropdown-item" 
                            :data-map-id="transport.dataMapId" href="javascript:void(0)">{{ transport.name }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="how-to-get-tab">
            <nav class="tab-switch nav">
                <a class="tab-switch__link nav-link active" data-template="#map_" href="#map_139" data-toggle="tab" role="tab">Карта</a>
                <a class="tab-switch__link nav-link" data-template="#route_" href="#route_139" data-toggle="tab" role="tab">Описание маршрута</a>
            </nav>
            <div class="tab-content">
                 <div class="tab-pane fade show active" id="map_139" role="tabpanel">
                    <div class="how-to-get__map-wrap">
                       <div v-for="city in cities" class="how-to-get__map-item">
                          <iframe v-for="transport in city.transport" :src="transport.mapLink" frameborder="0" allowfullscreen="true"></iframe>                        
                       </div>
                    </div>
                </div>
                <div class="tab-pane" id="route_139" role="tabpanel">
                   <div class="how-to-get__route-wrap">
                      <div class="how-to-get__route-head">Бесплатный трансфер из Москвы 8 и 9 июня</div>
                      <div class="how-to-get__route-text">Для участников и сопровождающих Sport-Marafon Trail организован 8 и 9 июня 2019 г. 
                      трансфер из Москвы прямиком до Никола-Ленивца. Стоимость трансфера в три раза ниже самостоятельной поездки — 700 рублей. 
                        В эту стоимость входит отправление из Москвы и дорога обратно из Никола-Ленивца в Москву. 
                        Отправление автобусов будет происходить от метро Тропарево в субботу 8 июня в 10:00 и в воскресенье 9 июня в 5:00. 
                        Время в дороге займет около 4 часов. Зарегистрироваться на трансфер возможно на странице регистрации</div>
                   </div>
                </div>
            </div>
        </div>
    </div>
    </section>
  `,
    data() {
        return {
            cities: [
                {
                    name:'Москва',
                    cityId: '77',
                    transport: [
                        {
                            name: 'Бесплатный трансфер',
                            dataMapId: '139',
                            mapLink: 'https://yandex.ru/map-widget/v1/-/CCq9mTkq'
                        },
                        {
                            name: 'Общественный транспорт',
                            dataMapId: '141',
                            mapLink: 'https://yandex.ru/map-widget/v1/-/CCq9F-IK'
                        }
                    ]
                },
                {
                    name:'Калуга',
                    cityId: '40',
                    transport: [
                        {
                            name: 'Бесплатный трансфер',
                            dataMapId: '140',
                            mapLink: 'https://yandex.ru/map-widget/v1/-/CCq9JT-K'
                        }
                    ]

                }
            ]
        }
    },
    methods: {
        changeMap() {

        }
    },
};

How to write a function to change the map on click

<a class="dropdown-button__item dropdown-item" ></a>

? That is, for example, we click on Moscow - a map corresponding to Moscow appears, we click on Kaluga - a map corresponding to Kaluga appears.

Answer 1

Add the selectedCity property to the component, give the user the ability to set its value:

<a
  v-for="city in cities"
  @click="selectedCity = city.name"
  class="dropdown-button__item dropdown-item"
>{{ city.name }}</a>

By the value of selectedCity, you get the cards:

computed: {
  maps() {
    return (this.cities.find(n => n.name === this.selectedCity) || {}).transport;
  },
},

If the city is selected and, accordingly, there are maps, they are shown to the user:

<div class="how-to-get__map-wrap" v-if="maps">
  <iframe v-for="map in maps" :src="map.mapLink" frameborder="0" allowfullscreen="true"></iframe>
</div>