V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ioioioioioioi
V2EX  ›  Vue.js

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

  •  
  •   ioioioioioioi · 2018-09-15 12:37:32 +08:00 · 4030 次点击
    这是一个创建于 2021 天前的主题,其中的信息可能已经有所发展或是发生改变。

    比如,一下代码,是用 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
        1
    lianyue  
       2018-09-15 13:16:41 +08:00 via iPhone
    js 放 html 尾部
    coolzjy
        2
    coolzjy  
       2018-09-15 13:38:17 +08:00
    又是一个不学基础就上框架的……
    ioioioioioioi
        3
    ioioioioioioi  
    OP
       2018-09-15 13:54:06 +08:00
    @coolzjy 你厉害,你牛逼
    mkeith
        4
    mkeith  
       2018-09-15 14:08:59 +08:00 via iPhone
    先去看教程,vue 不是你这样用的
    SilentDepth
        5
    SilentDepth  
       2018-09-15 14:22:27 +08:00
    确实是一个基础问题。

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

    如果必须要保证这个 HTML 元素顺序,监听 window 的 load 事件然后在回调里初始化 Vue 实例。这也是 jQuery 的常见实践。
    ioioioioioioi
        6
    ioioioioioioi  
    OP
       2018-09-15 14:31:17 +08:00
    @SilentDepth 放到下面也不行。 是这样的,要做个全局函数,onclick 的时候执行:请求服务器获取 form,form 里有独立的 html 和 Vue.js 。jQuery 可以用$.getScript,但是 Vue 好像不行。
    ioioioioioioi
        7
    ioioioioioioi  
    OP
       2018-09-15 14:36:55 +08:00
    @SilentDepth 好吧,$.getScript 可以的。
    orange1818
        8
    orange1818  
       2018-09-15 14:43:55 +08:00
    前端开发群补点人,群号:157156558
    FEDT
        9
    FEDT  
       2018-09-15 14:51:55 +08:00 via iPhone   ❤️ 4
    二楼说的没毛病,你也回的没毛病,他确实比你厉害比你牛逼
    Kilerd
        10
    Kilerd  
       2018-09-15 14:58:18 +08:00   ❤️ 3
    同意楼上说的,2 楼说得没错。没有 MVVM 基础就先了解一下 MVVM 框架是怎么处理这些情况的。

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

    不过,他确实比你厉害。
    ioioioioioioi
        11
    ioioioioioioi  
    OP
       2018-09-15 15:05:12 +08:00
    @FEDT
    @Kilerd So ...
    introom
        12
    introom  
       2018-09-15 16:09:57 +08:00 via Android
    @ioioioioioioi 你让我开心地笑了
    heww
        13
    heww  
       2018-09-15 16:57:07 +08:00 via iPhone
    新手或者不是新手找人帮助时态度要诚恳一点儿!

    二楼说的没错,这个问题的确是基础知识,和 vue 半毛钱关系都没有。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3818 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 10:34 · PVG 18:34 · LAX 03:34 · JFK 06:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.