我在 Vue.js 中遇到问题，无法将我的表设为 DataTable（带有搜索字段、排序列等）。

datatable.min.js我在里面调用原始文件，<head>或者拥有并调用另一个custom.js文件：

$(documen,jquery,firebase,vue.js,firebase-realtime-database,datatable"/>
	














    

		

        

            
            时间戳
        

		

		

        
		

    
















	
首页  > 解决方案 > 如何使用 Vue.js 将 DataTable() 与数组中的数据（v-for 循环）附加到现有 HTML？
我在 Vue.js 中遇到问题，无法将我的表设为 DataTable（带有搜索字段、排序列等）。



datatable.min.js我在里面调用原始文件，<head>或者拥有并调用另一个custom.js文件：



$(documen












jquery - 如何使用 Vue.js 将 DataTable() 与数组中的数据（v-for 循环）附加到现有 HTML？
我在 Vue.js 中遇到问题，无法将我的表设为 DataTable（带有搜索字段、排序列等）。



datatable.min.js我在里面调用原始文件，<head>或者拥有并调用另一个custom.js文件：



$(documen






问题描述



我在 Vue.js 中遇到问题，无法将我的表设为 DataTable（带有搜索字段、排序列等）。



datatable.min.js我在里面调用原始文件，<head>或者拥有并调用另一个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" :alt="'Fotografija korisnika '+ci.imeKorisnik" width="40" height="40" 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>&nbsp;{{ci.emailKorisnik}}</a><br><em class="fa fa-phone"></em>&nbsp;{{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 没有错误，但它只是没有根据需要呈现为带有分页、serach 字段等的默认表。



我不知道为什么。



任何帮助，将不胜感激。



谢谢






您需要使用template关键字作为消歧器Bind：



return CFunction<TRet(Arg1, Arg2)>::template Create<TClass, func>();
//                                  ^~~~~~~~




这是因为Create是一个依赖名称，编译器不知道您是在尝试调用模板函数还是将其与TClass. 有关该主题的更多阅读：我必须在哪里以及为什么要放置“模板”和“类型名称”关键字？


标签： jqueryfirebasevue.jsfirebase-realtime-databasedatatable


解决方案









好的，我已经提前调用了 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()

...




现在它起作用了。它显示分页等。










推荐阅读