未使用静态数据在Vue应用程序中加载jsGrid

Question

我正在尝试将jsGrid用于一个具有标题排序的简单表，但我甚至在加载基本样本时都遇到了问题。这是一个javascript和Vue应用程序，所以几乎不可能发布所有代码，因为它被分解成许多不同的组件/文件。我会试着把相关的部分贴出来。

HTML (符号容器是我的jsGrid目录)：

<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“设置为" data”，因为这是我的实际数据。我检查了格式，它似乎是正确的(下图)。现在，我只是尝试将静态“客户端”数组设置为data。评论部分是我试图使用控制器，但这对我也不起作用。我还认为我可能有几个不需要的属性挂起，因为我正在尝试许多不同的东西。我真的只需要排序-没有分页，编辑等。我还应该提到的是，我在控制台输出中没有得到任何类型的错误或输出。

this.symbols数据示例：

​

​

Answer 1

似乎我的"processingComplete“函数需要先完成。如果您查看html，您将看到只有在以下情况下才会创建"symbol-container“：

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

在"processingComplete“中，我将符号设置为一个列表，因此我假设我可以很好地使用符号容器。似乎Vue需要在div可用之前再次处理v-if。我希望我已经解释好了。

我的临时解决方案是将jsGrid代码放入一个函数(setTimeout() {}，1000)中；这让它显示出来，回答了“为什么”我遇到了这么多问题。最后，我决定完全不使用jsGrid。我只需要对3列进行排序，而且我很快就用手卷好了。

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