Добавление кастомной кнопки + привязка к событиям vue.js

[windstep]

Привет, коллеги.

Потратил несколько часов чистого времени на то, чтобы придумать более-менее приятный способ создания кнопки с привязкой к событиям vue.js. В голову пришло примерно такое решение, которое, возможно, стоит добавить в документацию.

<template>
    <yandex-map :settings="settings"
                :coords="coords"
                class="full_height"
                @map-was-initialized="initHandler"
                :controls="[]"
                zoom="9"
    >
    </yandex-map>
</template>

<script>
import { yandexMap, ymapMarker } from 'vue-yandex-maps';
export default {
    props: [
        'coords'
    ],
    components: {yandexMap, ymapMarker},
    data () {
        return {
            settings: {
                lang: 'ru_RU',
                apiKey: '16e29733-ba19-4cdc-a7f9-c17b81fb1eae',
                version: '2.1',
                coordorder: 'latlong'
            }
        };
    },
    methods: {
        initHandler (map) {
            // Событие вызывается, когда карта была инициализирована
            console.log(map);
           // Мой способ создания кнопки. Можно любым описанным в документации Яндекса
            let buttoncontent = {
                data: {
                    content: 'Искать'
                },
                options: {
                    maxWidth: [0, 180, 180],
                    selectOnClick: false
                }
            };
            // Ключевой фрагмент - создаем кнопку в ymaps 2.1.
            let button = new ymaps.control.Button(buttoncontent);
           // Добавляем кастомный слушатель события. Он вызывается, когда кнопка была нажата. Для подробностей смотрим https://tech.yandex.ru/maps/jsapi/doc/2.1/ref/reference/control.Button-docpage/ раздел события.
            // Для новичков! Нужно обязательно использовать синтаксис es2015, иначе не получите доступа к объекту this. Ну или используйте .bind(this) на функции.
            button.events.add('click', (e) => {
                this.fireevent();
            });
            // Прикрепляем кнопку к карте.
            map.controls.add(button, {left: 5, top: 5});
        },
        fireevent () {
            alert('fired');
        }
    }
};
</script>

<style>
    .full_height {
        width: 100%;
        height: 400px;
    }
</style>

Автору репозитория просьба добавить данный "хак" в доки или придумать, как это отслеживать.

[mosinve]

так не работает?

button.events.add('click', this.fireEvent);

[windstep]

Если честно, я не пробовал так. В целом, проблем с работой такого варианта не вижу. Использование моего предполагалось из-за особенностей системы.

[PNKBizz]

https://vue-yandex-maps.github.io/en/examples/#balloon-slot-in-marker

[windstep]

@PNKBizz это относилось в целом к канвасу карты, а не к балуну. Так что вариант с такой кнопкой пока не отменяется)

[PNKBizz]

@windstep ага, перепутал немного ) Но @mosinve, мне кажется, предложил отличный вариант )

[windstep]

@PNKBizz здесь вопрос не в способе вызова ивента, а в способе добавить на карту эту самую кнопку.

[PNKBizz]

@windstep имеете ввиду - упростить создание кнопок на карте? Ну у нас же есть инстанс карты, а кнопки добавляются буквально одной строчкой... Думаю наворачивать поверх этого абстракции нет смысла