Vue 和 JQuery 共存时， JQ（原生 JavaScript） 如何修改 Vue 中的数据

Question

目前页面已经有一个基于 DataTables 的表格。功能实现较多，无法 Vue 实现。

目前需要实现在 DataTables 中选择一些条目，然后在 Vue 中执行后续的操作。

通过 Webpack 打包后，无法在 console 中获取到 app 的示例，不知道该如何修改 vue 中的数据。

代码

app.js

import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';

Vue.use(ElementUI);

Vue.component('example-component', require('./components/ExampleComponent.vue'));const app = new Vue({    el: '#vueapp',    render: h => h(App)
});

项目依赖版本

"vue": "^2.5.16"

webpack:3.12.0

使用 Laravel 5.6 构建

希望得到的方案

1.一段代码，可以实现使用原生 JS 或 JQuery 修改 Vue 中的数据
2.webpack打包后如何在 console 中暴露出 vue 示例。

Answer 1

vue是一个基于对象的组件库（所有的 组件都是对象，他的 方法啊，data啊都存在于组件对象里面。而你要用一个操作dom的库去操作Vue对象,把vue数据给修改了，这怎么可能呢，就算把dom节点改了其实也没什么作用，vue会下次改回来。而原生的 js 的确是可以操作对象，你把这个对象暴露出来，然后通过js操作，然后改数据，但是呢，那你去操作vue对象，为什么不直接使用vue呢？