引导数据表和 vue答案

【问题标题】：bootstrap data table and vue引导数据表和 vue
【发布时间】：2018-03-05 09:29:18
【问题描述】：

我正在使用引导数据表和 vue.js 和当我在创建 vue 模型后尝试调用 DataTable 函数时，它不起作用，为什么？我也试过 $(app.$el).datatable() ，但没有用。这是我的代码

<table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th class="all">First name</th>
      <th class="desktop">Last name</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="ws in workschedule">
      <td>test</td>
      <td>test</td>
    </tr>
  </tbody>
</table>
$(document)
    .ready(function () {
            var app = new Vue({
                el: '#example',
                data: {
                    workschedule: []
        },
                created: function () {
                this.getSchedule();
            },
            methods: {
                getSchedule: function() {
                    var autourl =
                        'get.aspx?op=json&table=StoreUserWorkSchedule&qd=storeuserworkschedule' + appendTime();
                    this.$http.get(autourl)
                        .then(function(response) {
                            this.workschedule = response.data;
                        });
                }
            }
            });
            $('#example').DataTable({
            responsive: true
        });

    });

【问题讨论】：

标签： twitter-bootstrap vue.js

【解决方案1】：

您正在尝试访问 created 挂钩中的 $el 属性。 $el 在 vue 实例挂载后可用，即在 mounted 钩子中。

所以调用mounted hook中的datatable函数

mounted: function() {    
   this.$el.DataTable({
        responsive: true
    });
}

【讨论】：

对不起，我的问题有问题，我编辑了它，我在 vue 模型创建结束时调用了 datatable 函数，顺便说一下，我试图在 mount hook 中对其进行 inovke ，但它没有工作

【解决方案2】：

最后，watch 选项解决了它

            var app = new Vue({
                el: '#example',
                data: {
                    workschedule: []
                },
                created: function () {
                    this.getSchedule();
                },
                watch: {
                    workschedule: function (newData) {
                        $('#example').DataTable({
                            responsive: true
                        });
                    }
            },
            methods: {
                getSchedule: function() {
                    var autourl =
                        'get.aspx?op=json&table=StoreUserWorkSchedule&qd=storeuserworkschedule' + appendTime();
                    this.$http.get(autourl)
                        .then(function(response) {
                            this.workschedule = response.data;
                        });
                }
            }
            });

【讨论】：