Обработка клика на дочернем компоненте не срабатывает
В главном приложении имеется метод переключающийся между true и false, тем самым отображая/скрывая блок корзины:
const app = new Vue({
el: '#app',
data: {
isVisibleCard: false
},
methods: {
showBasketCard() {
this.isVisibleCard = !this.isVisibleCard
}
}
Есть два компонента - базовая кнопка и кнопка корзины:
Vue.component ('base-btn', {
template: `
<button class="btn">
<slot></slot>
</button>
`
})
Vue.component ('basket-btn', {
template: `
<base-btn class="basket-btn btn" type="button"
@click="$emit('click_close')">
Корзина
</base-btn>
`
})
И вот фрагмент в index.html:
<basket-btn @click_close="showBasketCard"></basket-btn>
До этого использовал в компоненте 'basket-btn' обычный тэг button и код нормально отрабатывал. Но как только стал добавлять базовые компоненты и заменил его на base-btn метод перестал работать. Подскажите, что я делаю не так.
Ответы (1 шт):
Автор решения: Виктор Карев
→ Ссылка
Ваш компонент base-btn не знает, что на событие click от кнопки внутри него нужно генерировать своё событие. Надо ему это подсказать:
Vue.component ('base-btn', {
template: `
<button @click="$emit('click')" class="btn">
<slot></slot>
</button>
`
})