在 vue js 中使用 Jquery 数据表答案

【问题标题】：using Jquery datatable in vue js在 vue js 中使用 Jquery 数据表
【发布时间】：2021-10-13 13:17:18
【问题描述】：

我正在尝试在 vue js 中使用 jquery 数据表，但是当我更改“显示条目”或在“搜索”中输入内容时，不会显示任何记录任何提示我做错了什么（我对 Vue Js 不是很有经验）将不胜感激下面的代码（从一个例子中得到，它似乎可以加载表中的数据）：

 template>
  <div class="Example">
      <h2>Implement jQuery DataTable in Vue Js</h2>
      <table class="display table-bordered nowrap" cellspacing="0" width="100%" id="datatable">
        <thead>
          <tr>
            <th>ID</th>
            <th>Product Title</th>
            <th>Product Price</th>
            <th>Created On</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in products" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.product_title}}</td>
            <td>{{item.product_price}}</td>
            <td>{{item.created_at}}</td>
          </tr>
          
        </tbody>
      </table>    
  </div>
</template>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> 
<script>
import 'jquery/dist/jquery.min.js';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'datatables.net-dt/js/dataTables.dataTables'
import 'datatables.net-dt/css/jquery.dataTables.min.css'
import axios from 'axios';
import $ from 'jquery';
export default {
  mounted(){
    axios
    .get("https://www.testjsonapi.com/products/")
    .then((response)=>
    {
      this.products = response.data;
        $('#datatable').DataTable();
    })
  },
  data: function() {
        return {
            products:[]
        }
    },  
}
</script>

【问题讨论】：

标签： jquery vue.js

【解决方案1】：

偶然发现这篇文章：

Vuejs and datatables: table empty when using v-for to fill data

...回答它

"...您可以在重新初始化之前调用 table.destroy() 来销毁当前实例。关键是将重新初始化延迟到 $nextTick() 以便 Vue 可以刷新旧 DataTables 的 DOM" - I在这里留下它可能关心的答案。

watch: {
products(val) {
  $('#datatable').DataTable().destroy();
  this.$nextTick(()=> {
    $('#datatable').DataTable()
  });
}

}

【讨论】：