The emit is functioning properly, as I can observe in the vue developer tool. However, the property in the parent element is not updating.
Child Component:
<template>
<div>
<ul>
<li v-for="(option, index) in options" :key="index" @click="selectOption(index)">
{{ option }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: "Dropdown",
props: {
options: {
type: Array,
},
},
data() {
return {
value: "",
}
},
methods: {
selectOption(id) {
this.value = this.options[id];
this.$emit("clickedOption", this.value);
}
}
}
</script>
Parent Component:
<button v-on:clickedOption="selectRole($event)">Select Role</button>
methods: {
selectRole(value) {
this.role = value.payload;
},
It appears that the function selectRole is not being called.