Vue.js отслеживание клика вне элемента

464

08 октября 2018, 21:40

Есть следующая разметка:

<p class="row" @dblclick="changingPrice" >
    <span v-if="isChangingPrice">
        <input type="text" v-model="currentPrice" @change="changePrice" @keyup.enter="changingPrice">
    </span>
    <span v-else>{{currentPrice}} руб</span>
</p>

По умолчанию показывается цена товара. При двойном клике инициализируется changingPrice, который меняет переменную isChangingPrice = !isChangingPrice.

Таким образом, после двойного клика, я получаю возможность редактирования данного поля.

Каким образом я могу менять переменную isChangingPrice по клику ВНЕ input'a?

Answer 1

Можно использовать кастомную директиву:

Vue.directive('click-outside', {
    bind(el, binding) {
        el.addEventListener('click', e => e.stopPropagation());
        document.body.addEventListener('click', binding.value);
    },
    unbind(el, binding) {
        document.body.removeEventListener('click', binding.value);
    }
});

Использование: