Vuejs jquery плагин с возможностью регистрации данных не работает

Question

Я уже установил dataTables, используя npm i dataTables --save, и теперь я вижу формат dataTable в моем компоненте vue, проблема в панели поиска, нумерация страниц не работает должным образом. Смотрите мой скриншот

код в моем компоненте

<table class="table table-hover" id="myTable">
  <thead>
    <tr>
      <th>Room Name</th>
      <th>Building</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="room in roomsData" :key="room.id">
      <td>{{room.room_desc}}</td>
      <td>{{room.bldg}}</td>
      <td>
        <a href="#"  data-toggle="modal" data-target="#exampleModal" @click="editModal(room)">
          <i class="fa fa-edit"></i>
        </a>
        <a href="#" @click="deleteRoom(room.id)">
          <i class="fa fa-trash text-red"></i>
        </a>
      </td>
    </tr>
  </tbody>
</table>

Методы

myTable(){
    $(document).ready( function () {
        $('#myTable').DataTable();
    });
}

getRoomsDataTable(){
  axios.get('/getRoomsDatatable')
    .then((res) => {
        this.roomsData = res.data
    }) .catch((e) => {
        console.log(e)
    })
},

Answer 1

После того, как вы создали экземпляры таблиц данных, вы не можете обновить данные в них, обновив dom. Вам нужно использовать API данных, чтобы вызвать refre sh с использованием самых последних данных.

В хуке mounted создайте экземпляр dataTables и сохраните ссылку.

{
    ...
    data() { 
        return {
            dtRef: null
        } 
    },
    mounted() {
        this.dtRef = $('#myTable').DataTable();
    }
}

После этого, очистить и обновить данные, как только вернется топор ios.

axios.get('/getRoomsDatatable')
    .then((res) => {
        this.roomsData = res.data
        datatable.clear();
        datatable.rows.add(res.data);
        datatable.draw();
    })

Вам нужно немного поиграться с этим , убедившись, что ваш источник данных настроен на правильное отображение данных.

---

В качестве альтернативы, после того, как данные были извлечены, вы можете уничтожить объект данных и создать его экземпляр, но вы можете испытать fla sh содержимого до чтения стиля.

Answer 2

Старайтесь помещать только $('#myTable').DataTable(); внутри установленного крюка следующим образом

methods:{
 getRoomsDataTable(){
           axios.get('/getRoomsDatatable')
                            .then((res) => {
                                this.roomsData = res.data
                            })
                            .catch((e) => {
                                console.log(e)
                            })
      },
},

mounted(){
 $('#myTable').DataTable();
}