Vue踩的坑

在Vue方法函数里,发现如果是想执行完method1,再执行method2,method2中要用到method1对data操作的值,但是实际中发现,直接在function里nav.method1();nav.method2();会导致method2获得不到method1对data操作的值。在下面的简单例子里是可以获得的。但是实际中如果method1中执行了例如ajax函数,就会导致这个问题。因为执行method1的ajax时间可能比较长,来不及返回给data的值。只有在ajax success里执行method2才可以。所以如果method2是要在method1执行完后执行的,需要把method2塞在method1之后,不要都放在function里让他们顺序执行。可能这个就是异步?

另外:Vue进行实例化,function第一次用navVM的时候,是第一次实例化,后面如果又用了method2,只是拿来用,没有再次实例化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="nav">
    测试VUE
</div>

<script src="../../resources/js/vue.js"></script>
<script src="../../resources/js/jquery-2.2.3.min.js"></script>
<script>
    var navVM = new Vue({
        el: "#nav",
        data: {
            name: "123"
        },
        methods: {
            method1: function() {
                var that = this;
                that.name= "wjy";
                navVM.method2();
            },
            method2:function () {
                var self = this;
                self.name="zuibangle"
                console.log(self.name)
            }

        }
    });
    $(function() {
        navVM.method1();
        //navVM.method2();

    });

</script>
</body>
</html>
发布了32 篇原创文章 · 获赞 3 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_40088443/article/details/88283303