Question

我同时使用gridstack（jquery插件）和vue.js。我知道jquery和vuejs不能一起合作。但是我需要这样做。

我有一个vue.js小部件，我添加了一些属性以便能够将其绑定到gridstack并使用gridstack管理其位置。

Gridstack移动我的窗口小部件并对其进行gs-x，gs-y，gs-with和gs-height属性的更改。但是我的vuejs属性没有改变。

当gridstack数据属性更改时，使我的vuejs属性更改的最佳方法是什么？

我的窗口小部件（Vue）：

    Vue.component('mini-widget', {
        template: '#mini-widget-preview-item-template',
        props: ['miniwidget'],
        data() {
            return {};
        },
        methods: {

        },
        destroyed() {

        }
    });

模板html：

<template id="mini-widget-preview-item-template">
    <div v-bind:data-gs-id="miniwidget.Id"
         v-bind:data-gs-x="miniwidget.Position.x"
         v-bind:data-gs-y="miniwidget.Position.y"
         v-bind:data-gs-width="miniwidget.Position.Width"
         v-bind:data-gs-min-width="miniwidget.Position.MinWidth"
         v-bind:data-gs-max-width="miniwidget.Position.MaxWidth"
         v-bind:data-gs-height="miniwidget.Position.Height"
         v-bind:data-gs-min-height="miniwidget.Position.MinHeight"
         v-bind:data-gs-max-height="miniwidget.Position.MaxHeight"  
         class="grid-stack-item mini-widget-preview-item p-2 card mini-widget-card">

        <div class="card-body flex-grow-0 p-0 m-0">
            <h5 class="text-center m-0 text-truncate">{{ miniwidget.Name }}</h5>
        </div>

    </div>

</template>

HTML：

<widget :is="widget.Type"
    v-bind:key="widget.Id"
    v-on:edit="editWidget(widget)"
    v-on:remove="removeWidget(index)"
    v-on:makewidget="makeWidget(widget.Id)"
    v-bind:widget="widget">
</widget>

这些vuejs项目的html结果是：

<div id="fb833d4c" 
    data-gs-id="fb833d4c" 
    data-gs-x="1" 
    data-gs-y="0" 
    data-gs-width="4" 
    data-gs-min-width="1" 
    data-gs-max-width="12" 
    data-gs-height="4" 
    data-gs-min-height="1" 
    data-gs-max-height="12" 
    class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide">
    ...
</div>

在gridstack documentation中，有两个事件：

gsresizestop(event, ui)
dragstop(event, ui)

我可以在vue.js小部件中获取jquery事件以分配好的属性，但是这些事件不会触发，也许还有其他方法可以做到这一点？

其他人的注意事项：如果可以避免将jquery库与vue.js一起使用，请执行此操作。它并没有真正协同工作，会导致性能问题。如果您搜索诸如gridstack或gridster之类的内容以在您的应用程序内包含网格，则可以尝试使用vue grid layout（适用于vue.js）

如何使Gridstack（jquery插件）和Vue.js协同工作？

0 个答案: