vue 方法互相調(diào)用，被調(diào)用方法無(wú)法獲取/更改data中的參數(shù)

<!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調(diào)用了fun2，但是alert卻是undefined，并且執(zhí)行完后test的值為300,各位大佬可以解釋下嗎，謝謝！

回答

編輯回答

妖妖

試下下面代碼，改了一點(diǎn)點(diǎn)

<!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>

2017年5月10日 03:03