Day 4 of Vue.js

Child to Parent Communication A child can emit a message just like the example in yesterday’s post. Here’s another example: Vue.component(‘coupon’, { template: ‘<input type=”text” placeholder=”enter your code” />’, methods: { onCouponApplied() { this.$emit(‘applied’); //@applied=”onCouponApplied” } } }); new Vue({ el: ‘#root’, data: { couponApplied: false }, methods: { onCouponApplied() { this.couponApplied = true; } […]

Day 3 of Vue.js

Emit You can attach custom event listeners to elements to listen for events that are announced by the sub-elements. e.g. <modal v-if=”showModal” @close=”showModal = false” body=”test”></modal> <script> Vue.component(‘modal’, { props: [‘body’], template: ` <div class=”modal is-active” v-show=”showModal”> <div class=”modal-background”></div> <div class=”modal-content”> <div class=”box”> {{ body }} </div> </div> <button class=”modal-close” @click=”$emit(‘close’)”></button> </div> ` }); </script> […]

Day 2 of Vue.js

Day 2 of Vue.js Event Handling with Vue The v-on directive is used to handle events. For example: you can write <button v-on:click=”addName”>Add</button> <script> var app = new Vue({ el: ‘#root’, data: { newName: ”, names: [‘Joe’, ‘John’, ‘Abe’, ‘Ben’] }, methods: { addName() { this.names.push(this.newName); this.newName = ”; } } }); </script> To make […]