问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue 方法互相调用，被调用方法无法获取/更改data中的参数

头像
yaphone
    234
    新手上路，请多包涵
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <title>RunJS 演示代码</title>
  </head>
<body>
  <div id="helloApp">
        {{test}}
        <button @click="fun1"> te</button>
    </div>  
    
  </body>

<script>
    var helloApp = new Vue({
        el: "#helloApp",
        data: {
            test: "200"
        },
        methods: {
            fun1: function() {
                this.test = "300"
                this.$options.methods.fun2()
            },
            fun2: function() {
                alert(this.test)
                this.test = "400"
            }
        }
    })
            

</script>

</html>

    代码如上，vue2.0，fun1调用了fun2，但是alert却是undefined，并且执行完后test的值为300,各位大佬可以解释下吗，谢谢！

    javascriptvue.js
    阅读 2.9k
    1 个回答
    得票最新
    头像
    xiaofei
      8451214

      试下下面代码，改了一点点

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <title>RunJS 演示代码</title>
  </head>
<body>
  <div id="helloApp">
        {{test}}
        <button @click="fun1"> te</button>
    </div>  
    
  </body>

<script>
    var helloApp = new Vue({
        el: "#helloApp",
        data: {
            test: "200"
        },
        methods: {
            fun1() {
                this.test = "300"
                this.fun2()
            },
            fun2() {
                alert(this.test)
                this.test = "400"
            }
        }
    })
            

</script>

</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题