如何在 DOM 更改后更新 Vue 数据答案

【问题标题】：How to update Vue data after DOM changes如何在 DOM 更改后更新 Vue 数据
【发布时间】：2017-10-05 11:44:21
【问题描述】：

我正在使用 jQuery 可排序插件和 VueJS。该插件更改了 DOM，但这些更改并未反映在我的组件数据对象上。

我有一个对象数组，在 HTML 中呈现为 list<li>。 sortable 插件改变了这些列表项的顺序，但是 vue 组件数组的顺序没有改变。

有什么帮助吗？

【问题讨论】：

你能包含一个 sn-p 或 fiddle 来显示你到目前为止所拥有的吗？

标签： vue.js

【解决方案1】：

有一个特殊的第三方 Vue 组件负责将 Sortable 与 Vue.js 集成：https://github.com/SortableJS/Vue.Draggable

最好使用它而不是尝试自己做。

【讨论】：

【解决方案2】：

通过将组件实例声明为变量来获取 Vue 实例。

var vm = new Vue({
el: '#app',
components: {
    'my-component': { 
        template: '#my-template',
        data: function() {
            return {
                list: [],
            };
        },
        ...
    },
},

这样您也可以访问实例外部的数据。只需根据您收听的更改更新数据。喜欢vm.list = [] ;)

【讨论】：