如何让 Vue.js 处理新加的 dom

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 2585 天前的主题，其中的信息可能已经有所发展或是发生改变。

比如，一下代码，是用 Modal 弹出, 点击 Sumit 没有效果。

<script> new Vue({ el: '#pop-form', methods: { submit() { alert('hi') } }, }) <script> <div id='pop-form'> <button @click="submit">Submit</button> </div>

第 1 条附言 2018-09-15 14:41:38 +08:00

解决方法： Dom append后再请求js，再渲染Dom就可以了

BTW, 谁知道axios 怎么实现 $.getScript

function onclick_get_form (id) { liteWaiting.show() axios.get('/path/to/html').then(function (res) { // handle success $('#modal').remove(); $('body').append(res.data); $.getScript("/path/to/script", function() { $('#modal').modal(); }); }).catch(function (error) { // handle error msg.error('error') }).then(function () { // always executed liteWaiting.hide() }) }

13 条回复 2018-09-15 16:57:07 +08:00

lianyue

2018-09-15 13:16:41 +08:00 via iPhone

js 放 html 尾部

coolzjy

2018-09-15 13:38:17 +08:00

又是一个不学基础就上框架的……

ioioioioioioi

2018-09-15 13:54:06 +08:00

@coolzjy 你厉害，你牛逼

mkeith

2018-09-15 14:08:59 +08:00 via iPhone

先去看教程，vue 不是你这样用的

SilentDepth

2018-09-15 14:22:27 +08:00

确实是一个基础问题。

浏览器解析 HTML 文档是顺序方式，遇到 script 直接解析执行，执行完毕后再继续解析下面的 HTML 内容。你的代码里，先 script，于是 Vue 就开始初始化了，然而这个时候它尝试找一个 #pop-form 元素却找不到（因为这个元素此时还没有被浏览器解析），所以就不正常了。正是因为这个，所以才有了一个常见实践就是脚本都放到 body 底部，保证需要用到的 HTML 元素已经被解析。

如果必须要保证这个 HTML 元素顺序，监听 window 的 load 事件然后在回调里初始化 Vue 实例。这也是 jQuery 的常见实践。

ioioioioioioi

2018-09-15 14:31:17 +08:00

@SilentDepth 放到下面也不行。是这样的，要做个全局函数，onclick 的时候执行：请求服务器获取 form，form 里有独立的 html 和 Vue.js 。jQuery 可以用$.getScript，但是 Vue 好像不行。

ioioioioioioi

2018-09-15 14:36:55 +08:00

@SilentDepth 好吧，$.getScript 可以的。