jsGrid 未在具有静态数据的 Vue 应用程序中加载

Question

我正在尝试使用 jsGrid 进行简单的 table 和 header 排序，但我什至无法加载基本示例。这是一个 javascript 和 Vue 应用程序，因此几乎不可能 post 所有代码，因为它被分成许多不同的 components/files。我会尝试 post 相关部分。

HTML（symbol-container 是我的 jsGrid div）：

<div class="left-side-column">
    <div class="menu-container">
        <input id="processButton" type="button" value="Do it" v-on:click="processImage" :disabled="disable">
        <div v-if="symbols.length !== 0">
            <span id="symbol-header">{{ symbols.length }} threads</span>
            <div id="symbol-container">
                <!-- <table id="symbol-table">
                    <tr style="border: 1px solid black">
                        <th></th>
                        <th></th>
                        <th>DMC #</th>
                        <th>Count</th>
                    </tr>
                    <symbol-item v-for="(symbol, index) in symbols" :key="index" :symbol="symbol"></symbol-item>
                </table> -->
            </div>
            <span class="slider-label">Color Count:</span>
            <div id="reduce-color-slider"></div>
        </div>
    </div>
</div>

CSS

#symbol-container {
    height: 600px;
    overflow-y: auto;
}

Javascript

 processingComplete: function(stitcher) {
        this.symbols = stitcher.GetDMCList();

        var clients = [
            { Name: "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
            { Name: "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
            { Name: "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
            { Name: "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
            { Name: "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
        ];

        $('#symbol-container').jsGrid({
            width: "100%",
            height: "600px",
            pageLoading: false,
            inserting: true,
            editing: true,
            sorting: true,
            paging: false,
            autoload: true,
            data: clients,
            // controller: {
            //     loadData: function(filter) {
            //         console.log("loading");
            //         return clients;
            //     },
            //     insertItem: function(item) {
            //         console.log("insertItem being called..")
            //     },
            //     updateItem: function(item) {
            //         console.log("updateItem being called..")
            //     },
            //     deleteItem: function(item) {
            //         console.log("deleteItem being called..")
            //     }
            // },
            fields: [
                { name: "Name", type: "text", width: "50" }
            ]
        });

processingComplete() 在用户交互发生后比页面加载晚得多被调用。目标是将“this.symbols”设置为“数据”，因为这是我的实际数据。我检查了格式，它似乎是正确的（下图）。现在我只是试图将静态“客户端”数组设置为数据。评论部分是我尝试使用控制器，但这对我也不起作用。我还认为，在我尝试许多不同的事情时，我可能会有一些不需要的属性。我真的只需要排序——不需要分页、编辑等。我还应该提到我在控制台输出中没有得到任何错误或任何类型的输出。

this.symbols 数据样本：

Answer 1

看来我的“processingComplete”功能需要先完成。如果您查看 html，您会发现“symbol-container”仅在以下情况下创建：

<div v-if="symbols.length !== 0">

在“processingComplete”中，我将符号设置为一个列表，所以我认为我可以很好地使用符号容器。似乎 Vue 需要在 div 可用之前再次处理 v-if。我希望我能解释清楚。

我的临时解决方案是将 jsGrid 代码放入 setTimeout(function() {}, 1000);这得到了显示，它回答了 'why' 我遇到了很多麻烦。最后我决定完全不使用 jsGrid。我只需要对 3 列进行排序，而且我手卷得很快。

感谢 Bravo 为我指明了正确的方向。

jsGrid 未在具有静态数据的 Vue 应用程序中加载

jsGrid is not loading in Vue application with static data

javascript

vue.js

jsgrid