When a child component makes an input change, it emits an event with some data:
Vue.component('gum-option', {
inheritAttrs: false,
props: ['label'],
template: `
<label class="gum-option">
<input
type="radio"
v-bind="$attrs"
v-on:change="$emit('update', this.label)">
<span>{{ label }}</span>
</label>
`
});
The parent component catches this event to trigger a method that displays an alert:
Vue.component('gum-select', {
template: `
<div v-on:update="updateValue">
<label>{{label}}</label>
<div class="selected">
{{selectedOption}}
</div>
<slot v-bind="options"></slot>
</div>
`,
data: function () {
return {
selectedOption: ''
}
},
props:['options', 'name', 'label'],
methods: {
updateValue: function(event) { // method triggered by the "update" event
alert(event); // Why isn't this working?
}
}
});
To see what's causing the issue, check out this pen: https://codepen.io/bourpie/pen/JjXdjzg?editors=1011