如何使用 Vue.js 将 DataTable() 与数组中的数据（v-for 循环）附加到现有的 HTML <table>？
Posted
技术标签:
【中文标题】如何使用 Vue.js 将 DataTable() 与数组中的数据（v-for 循环）附加到现有的 HTML <table>？【英文标题】：How to attach DataTable() to existing HTML <table> with the data in array (v-for loop) using Vue.js? 【发布时间】：2019-10-03 17:18:35 【问题描述】：我在 Vue.js 中遇到问题，无法将我的表设为 DataTable（带有搜索字段、排序列等）。
我在<head> 中调用原来的datatable.min.js，或者拥有并调用另一个拥有的custom.js 文件：
$(document).ready(function()
$("#zero_configuration_table").DataTable()
);
如何像在 jQuery $('#zero_configuration_table').DataTable(); 中一样调用和/或附加？
我不知道我应该把那个代码放在哪里让它工作。
我无法应用此 https://codepen.io/feload/pen/PJKoJP?editors=1010 中的示例。甚至来自https://datatables.net/。
在我的 .vue 文件中，我称之为“表格页面”：
<template>
...
<div class="table-responsive">
<table id="zero_configuration_table" class="display table table-striped table-bordered table-hover" style="width:100%">
<caption>Popis pristiglih prijava korisnika aplikacije</caption>
<thead class="thead-dark">
<tr>
<th scope="col">DATUM I VRIJEME</th>
<th scope="col">OSOBA</th>
<th scope="col">SADRŽAJ PORUKE</th>
<th scope="col">KONTAKT INFORMACIJE</th>
</tr>
</thead>
<tbody>
<tr v-for="ci in chatItems">
<td class="align-middle"><strong>ci.datumPoruka | formatDate</strong> u <strong>ci.datumPoruka| formatDateVrijeme</strong></td>
<td class="align-middle"><a :href="ci.fotografijaKorisnik" title="Pogledaj uvećanu fotografiju korisnika" target="_blank"><img :src="ci.fotografijaKorisnik" : class="okrugla"></a> ci.imeKorisnik</td>
<td v-if="ci.sadrzajPoruka.length && !ci.datotekaPoruka.length && !ci.kartaLat.length" class="align-middle">ci.sadrzajPoruka</td>
<td v-else-if="!ci.sadrzajPoruka.length && ci.datotekaPoruka.length && !ci.kartaLat.length" class="align-middle"><a :href="ci.datotekaPorukaURL" target="_blank" title="Pogledaj uvećanu fotografiju" class="btn btn-md btn-primary">Pogledaj uvećanu fotografiju <em class="fa fa-external-link"></em></a></td>
<td v-else-if="!ci.sadrzajPoruka.length && !ci.datotekaPoruka.length && ci.kartaLat.length" class="align-middle"><a :href="'https://www.google.com/maps/place/'+ci.kartaLat+','+ci.kartaLong" target="_blank" title="Pogledaj na karti" class="btn btn-md btn-primary">Pogledaj na karti <em class="fa fa-external-link"></em></a></td>
<td v-else class="align-middle">Prazna poruka</td>
<td class="align-middle"><a :href="'mailto:'+ci.emailKorisnik" title="Pošalji e-mail"><em class="fa fa-envelope"></em> ci.emailKorisnik</a><br><em class="fa fa-phone"></em> ci.telefonKorisnik</td>
</tr>
</tbody>
</table>
</div>
...
</template>
默认导出时，在 data() 下我有数据数组：
data()
return
chatItems: []
,
Under 创建了从 FireBase 获取特定数据的代码，然后在 <template> 中使用 v-for 显示数据：
created: function()
$('#scroll_horizontal_table').DataTable(); // THIS IS THE PROBLEM, HOW AND WHERE TO PUT?
this.userData(),
db.ref("chatmodel")
.once("value")
.then(dataSnapshot =>
const itemsArray = [];
dataSnapshot.forEach(childSnapshot =>
const childData = childSnapshot.val();
itemsArray.push(
fotografijaKorisnik: childData.userModel.photo_profile,
imeKorisnik: childData.userModel.name,
telefonKorisnik: childData.userModel.phoneNumber,
emailKorisnik: childData.userModel.email,
datumPoruka: childData.timeStamp,
sadrzajPoruka: childData.message,
datotekaPoruka: childData.fileModel.name_file,
datotekaPorukaURL: childData.fileModel.url_file,
kartaLat: childData.mapModel.latitude,
kartaLong: childData.mapModel.longitude
);
);
this.chatItems = itemsArray; // reverse()
);
,
...
似乎一切正常，dataTable 没有错误，但它只是没有根据需要呈现为带有分页、搜索字段等的默认表。
我不知道为什么。
任何帮助将不胜感激。
谢谢
【问题讨论】：
我正在使用 jquery-3.3.1.min.js 和 Bootstrap 需要稍等，所以设置setTimeout(function() $("#zero_horizontal_table").DataTable(); , 4000); // 等待 4 秒。然后渲染分页、搜索字段等。 【参考方案1】：好的，我已经提前调用了 DataTable()，所以数据还没有从 FireBase 中获取，也没有被渲染。
在方法下，我已经很少了，所以只是做了一个超时：
methods:
userData:function()
var user = firebase.auth().currentUser;
var name, email, photoUrl, uid;
setTimeout(function() $("#zero_horizontal_table").DataTable(); , 4000);
// WAIT FOR 4 SECONDS AND THEN APPLY DATATABLE()
...
现在可以了。显示分页等。
【讨论】：
以上是关于如何使用 Vue.js 将 DataTable() 与数组中的数据（v-for 循环）附加到现有的 HTML <table>？的主要内容，如果未能解决你的问题，请参考以下文章