Строка, переданная для сохранения действия (через mapActions), поступает как [объект, объект]

Question

Я отправляю событие из дочернего компонента, а затем отправляю действие хранилища (используя mapActions) в родительский компонент. Когда это действие отправляется, родительский компонент передает строку в действие.

Однако, если я записываю в журнал ту строку, которая передается в действие хранилища, я получаю [object Object], а не строку, даже если Я проверил строку, прежде чем она будет передана действию, и она выглядит хорошо. Что я делаю неправильно ???

В моем родительском компоненте у меня есть

<ListItem v-for="item in listItems" :key="item.id" 
                 :item="item"
                 @remove="deleteListItem(`${item.id}`)"
      />

(ListItem - мой дочерний компонент).

В методах у меня есть

methods: {
...mapActions('listItems', ['deleteItem',],),
deleteListItem (id) {
  this.deleteItem(id);
},

},

В моем хранилище listItems у меня есть:

 deleteItem (id) {
    api.del(`${deleteURL}/${id}`);
  },

К тому времени, когда в deleteItem прибывает id, эта строка мне больше не нужна.

Может ли кто-нибудь дать какое-то понимание?

Answer 1

Оказывается, мне нужно было обернуть аргумент в объекте, когда я передаю его в хранилище. Выполнение this.deleteItem({id});, похоже, решило проблему ...

Answer 2

Попробуйте выполнить следующее: в дочернем компоненте передайте идентификатор следующим образом:

this.$emit('remove', this.item.id);

Затем родительский элемент отображает дочерний элемент следующим образом:

<ListItem v-for="item in listItems" :key="item.id" 
          :item="item"
          @remove="deleteListItem"
/>

methods: {
...mapActions('listItems', ['deleteItem',],),
deleteListItem (id) {
     this.deleteItem(id);
},