javascript - 加载 Vue.js 表需要很长时间（加载两次）

Question

这是一个网络应用程序，使用 Django 作为后端，Vue.js 作为前端。

我已经使用 Vue.js 构建了一个页面，包括一个表格。 我确实需要 jquery 数据表来进行分页，因为该表有很多数据。

但是加载需要很长时间，并且表格似乎渲染了两次（第一次显示普通表格，然后显示 Vue.js 表格）。

如何通过让表格显示最终结果而不是加载两次来缩短表格加载时间？

    <div id="app">
    <br>
    <p></p>
    <form  ref="form" id="myform" method="post" action="/tag_course/">
        <table id="myTable">
            <thead>
            <tr>
                <th>Author/Editor</th>                   
            </tr>
            </thead>
            <tbody>
            <tr v-for="(row, index) in filteredRows" :key="`isbn-${index}`">               
                <td v-html="highlightMatches(row.author)">{{ row.author }}</td>                 
                <td><button type="button" class="button2" v-on:click="check( $event, row.title)">Tag & Submit</button></td>
            </tr>
            </tbody>
        </table>
    </form>
</div>

    <script>
    Vue.prototype.$http = axios;
    $(document).ready(function() {
        $('#myTable').DataTable({info: false, bLengthChange: false});
        $(".dataTables_filter input").attr("placeholder", "By title, iSBN, VBID, publisher, Author");
    } );

    var query_results_book = {{ query_results_book_json|safe}};
    var book_rows = [{author: query_results_book[0].fields.author}];

    for (var i=1; i < query_results_book.length; i += 1){
       author: query_results_book[i].fields.author});
    }

    const app = new Vue({
        el: '#app',
        data:() => ({
            filter: '',
            rows: book_rows
        }),

        methods: {
            highlightMatches(text)
            {
                if (typeof text === 'string' || text instanceof String){
                    text = (text?text:'None');
                    const matchExists = text.toLowerCase().includes(this.filter.toLowerCase());
                    if (!matchExists) return text;
                    const re = new RegExp(this.filter, 'ig');
                    return text.replace(re, matchedText => `<strong>${matchedText}</strong>`);
                }
            },
            submit : function(){
                this.$refs.form.submit()
            },            

                      
        computed: {
            filteredRows() {
                return this.rows.filter(row => {
                    const author = String(row.author).toString().toLowerCase();
                    const title = String(row.title).toLowerCase();
                    const searchTerm = this.filter.toLowerCase();
                    return title.includes(searchTerm) ||
                        author.includes(searchTerm);
                });
            }
        },
    });

标签： javascriptvue.js