Skip to content

Создание и удаление карты

Переключить карту в v-show

Переключить карту в v-if

html
<h3 @click="isShow = !isShow">
    Переключить карту в v-show
</h3>
<h3 @click="isIf = !isIf">
    Переключить карту в v-if
</h3>

<template
    v-for="i in 2"
    :key="i"
>
    <template v-if="i === 1 && isShow">
        V-Show Map:
    </template>
    <template v-else-if="i === 2 && isIf">
        V-If Map:
    </template>
    <yandex-map
        v-if="i === 1 || isIf"
        v-show="i === 2 || isShow"
        :height="height"
        :settings="{
            location: {
                center,
                zoom,
            },
            theme,
        }"
        :width="width"
    >
        <yandex-map-default-scheme-layer/>
        <yandex-map-controls :settings="{ position: 'right' }">
            <yandex-map-zoom-control/>
        </yandex-map-controls>
    </yandex-map>
    <br v-if="i === 1 && isShow && isIf">
</template>
ts
import { YandexMap, YandexMapControls, YandexMapDefaultSchemeLayer, YandexMapZoomControl } from 'vue-yandex-maps';
import { ref } from 'vue';

const isShow = ref(false);
const isIf = ref(false);
css
<style scoped>
h3 {
  cursor: pointer;
  text-decoration: underline;
  user-select: none;
  margin: 10px 0;
}
</style>

Сделано с ♥ под лицензией MIT.