Блог

Итак, я использую перетаскиваемый Vue, и я должен получить доступ к объекту события в VueJS, как показано ниже:

 <draggable group="leads"
   :list="newLeads"
   @change="seeChange($event, 'New')">
 

В методах:

 async seeChange(event, status) {

    console.log(event.added.element.id);

 await axios.patch('http://localhost/api/leads/' event.added.element.id '/update-status', 
{status : status}).then(response => {

        this.leads.unshift(response.data.data);
        
        this.getLeads();
    }).catch(error => {
      console.log(error);
    });

  },
 

Я вижу идентификатор в консоли. Но когда я перетаскиваю карту (запуск события) Я получаю

Не удается прочитать свойства неопределенного (чтение «элемента»)

ошибка при приземлении карты. Даже вызов Axios получает правильный идентификатор, и запрос отправляется нормально. Но, тем не менее, появляется белый экран с этой ошибкой.

Чего мне не хватает?

Change событие вызывается с одним аргументом, содержащим одно из следующих свойств: added , removed , moved . Документы.

event.added содержит информацию об элементе, добавленном в массив, но когда вы это делаете removed , moved у вас нет свойства added в объекте event .

Вы можете использовать его следующим образом:

 async seeChange(event, status) {
    console.log(event?.added.element.id);

    if(event.added) {
           await axios.patch('http://localhost/api/leads/' event.added.element.id '/update-status', {status : status}).then(response => {
              this.leads.unshift(response.data.data);
              this.getLeads();
           }).catch(error => {
              console.log(error);
           });
    }
}
 

запрос будет отправлен только после добавления события.

Если вы хотите отправлять запрос по каждому событию, вы можете сделать это, используя Object.values(event)[0] , например:

 async seeChange(event, status) {
    const id = Object.values(event)[0].element.id;
    console.log(id);

           await axios.patch('http://localhost/api/leads/' id '/update-status', {status : status}).then(response => {
              this.leads.unshift(response.data.data);
              this.getLeads();
           }).catch(error => {
              console.log(error);
           });
    
}