0

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

Rim Khairullin
  • 3
  • 1

1 Answers1

0

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

jodorma
  • 16
  • 2