The item is not removed from list. Although I am passing the red to the event via emit().
parent
...
<b-list-group-item
class="d-flex align-items-center justify-content-md-between"
v-for="member in memberList"
:key="member.id"
>
<member-card @onRemoveMember="removeMember(member.id)" :model="member"></member-card>
</b-list-group-item>
...
export default {
components: {
MemberCard,
MemberInput,
},
setup() {
const memberList = ref([]);
const addMember = ({ name }) => {
memberList.value = [...memberList.value, {id: memberList.value.length + 1, avatar: "ava", name}]
}
const removeMember = (id) => {
memberList.value = memberList.value.filter(item => item.id != id)
console.log(id)
}
return {
memberList,
addMember,
removeMember
};
},
};
child
<template>
<b-avatar class="mr-3"></b-avatar>
<span class="mr-auto">{{ model.name }}</span>
<b-button @click="onRemoveMember">Удалить</b-button>
<b-badge>{{ model.id }}</b-badge>
</template>
<script>
export default {
emits: ["onRemoveMember"],
props: {
model: {
default: {
id: 0,
avatar: "ava",
name: "Blank",
}
},
setup(props, { emit }) {
const onRemoveMember = () => {
emit("onRemoveMember");
};
return {
onRemoveMember
};
},
},
}
</script>
I tried to track the button click with console.log(), but nothing displayed. I searched for solutions on similar problems on SO, but without result
Your setup() function appears to be contained within the props object. Close off the props object with another bracket.
<script>
export default {
emits: ["onRemoveMember"],
props: {
model: {
default: {
id: 0,
avatar: "ava",
name: "Blank",
}
}
// add closing bracket below
},
setup(props, { emit }) {
const onRemoveMember = () => {
emit("onRemoveMember", props.model.id);
};
return {
onRemoveMember
};
},
};
</script>
Should be that simple. Here's the documentation example for reference: https://vuejs.org/api/composition-api-setup.html#accessing-props