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

[ioioioioioioi]

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

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

解决方法： 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()
    })
}

[lianyue]

js 放 html 尾部

[coolzjy]

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

[ioioioioioioi]

@coolzjy 你厉害，你牛逼

[mkeith]

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

[SilentDepth]

确实是一个基础问题。

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

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

[ioioioioioioi]

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

[ioioioioioioi]

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

[orange1818]

前端开发群补点人，群号：157156558

[FEDT]

二楼说的没毛病，你也回的没毛病，他确实比你厉害比你牛逼

[Kilerd]

同意楼上说的，2 楼说得没错。没有 MVVM 基础就先了解一下 MVVM 框架是怎么处理这些情况的。

当然，你说的也没错，谁又规定在 MVVM 里面只能用他那套规则呢？ 对吧。

不过，他确实比你厉害。

[ioioioioioioi]

@FEDT
@Kilerd So ...

[introom]

@ioioioioioioi 你让我开心地笑了

[heww]

新手或者不是新手找人帮助时态度要诚恳一点儿！

二楼说的没错，这个问题的确是基础知识，和 vue 半毛钱关系都没有。