Как перезагрузить компонент таблицы Vue после редактирования записи? - PullRequest
Новая
       35

Как перезагрузить компонент таблицы Vue после редактирования записи?

0 голосов
/ 25 мая 2020

Я пытаюсь перезагрузить компонент таблицы vue новыми данными после редактирования записи, но таблица обновляется только после полной перезагрузки страницы, я использую компонент окна боковой панели для редактирования записи таблицы, как только запись редактируется, таблица нуждается в обновлении. Может ли кто-нибудь помочь решить эту проблему с помощью кода.

Мой компонент таблицы 

  <template slot="thead">
    <vs-th sort-key="id">Id</vs-th>
    <vs-th sort-key="name">Name</vs-th>
    <vs-th sort-key="phone_number">Phone No</vs-th>
    <vs-th sort-key="location">Location</vs-th>
  </template>

  <template slot-scope="{data}">
      <tbody>
        <vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data">

           <vs-td>
            <p class="font-medium truncate">{{ tr.id }}</p>
          </vs-td>  

         <vs-td>
            <p class="font-medium truncate">{{ tr.first_name }}</p>
          </vs-td>  


          <vs-td>
          <p class="font-medium truncate">{{ tr.phone_number}}</p>
          </vs-td>

          <vs-td>
          <p class="font-medium truncate">{{ tr.location}}</p>
          </vs-td>

       </vs-tr>
      </tbody>
    </template>

Метод редактирования записи в модальном компоненте 

  editData () {
  this.$validator.validateAll()
      let obj = {
        id: this.dataId,
        first_name: this.datafirst_name,
        phone_number: this.dataphone_number,
        location: this.datalocation,

      }
       this.$vs.loading();

        this.$store.dispatch("userManagement/updateLead", obj)

     .then(() => {
      //  location.reload();

       this.$vs.loading.close();

       alert('Updated');            
      })
      .catch(error => {
        console.log(error);
        this.$vs.loading.close();
         alert('Update error');
      });
      this.$emit('closeSidebar')
      this.$validator.reset()
      this.resetFields();


},

1 Ответ

0 голосов
/ 25 мая 2020

Вам не нужно перезагружать всю страницу или таблицу. Прежде всего - лучше использовать id вместо key с v-for, а не index (это будет более четко определять редактируемую строку). Затем вы можете просто emit отредактировать событие и изменить элемент в таблице: 

this.$emit('edit', this.obj);

Затем просто прослушайте это событие в таблице и отредактируйте элемент там: 

<modal-component @edit="editEvent"></modal-component>

editEvent(obj) {
    this.data = this.data.map(item => {
        if(parseInt(item.id, 10) === parseInt(obj.id, 10)) {
            return obj;
        }

        return item;
    });
}

It будет быстрее, чем ожидание ответа API (также вы должны обрабатывать ошибки, но это на вас). В противном случае, если у вас нет доступа к модальному компоненту, вы должны хранить данные в хранилище и получать их оттуда (обновить данные в action).

...