Я очень новичок в Vue JS.Я только учусь использовать это от laracasts.Я хочу общаться между корневым классом и подклассом.Здесь пользователь вводит код купона, и когда он меняет фокус, он показывает текст.
Мой HTML-код похож на это
<body>
<div id="root">
<coupon @applied="couponApplied">
<h1 v-if="isCouponApplied">You have applied the coupon.</h1>
</div>
<script src="https://unpkg.com/vue@2.5.21/dist/vue.js"></script>
<script src="main.js"></script>
</body>
Мой main.js похож на это,
Vue.component('coupon', {
template: '<input @blur="applied">',
methods: {
applied()
{
this.$emit('applied');
}
}
});
new Vue({
el: '#root',
data: {
isCouponApplied:false,
},
methods:{
couponApplied()
{
this.isCouponApplied = true;
}
}
});
Я проверяю с помощью расширения Vue Devtools в Chrome.Там нет ошибки.Событие размытия срабатывает.isCouponApplied также изменяется на true.Но h1 не показывает.Может кто-нибудь показать мне, где я допустил ошибку?