Question

我对Vue.Js很新，所以请原谅我这个新手问题。我的result方法中有一个data()变量，当我尝试使用result更新this.result = result变量时，在浏览器中，原始变量保持不变。我不喜欢知道我做错了什么。我用Google搜索了几个小时，没有找到答案。一如既往，非常感谢任何帮助。我不知道为什么我的数据没有更新。这是我的代码;

play.js

    Vue.component('game', {
        template: '#game-template',

        data: function () {
            return {
                ready: null,
                result: 0
            }
        },
        props: ['gameid'],


        methods: {
            loadGame: function () {
                this.$http.get('../api/games/ready/' + this.gameid).then(function (response) {
                    if (response.body === '1') {
                        // process coinflip upon ready game
                        var result = Math.floor((Math.random() * 2) + 1);
                        this.result = result;
                        console.log(this.result);


                    }

                }.bind(this));
            }
        },

        ready: function () {
            this.loadGame();

            setInterval(function () {
                this.loadGame();
            }.bind(this), 5000);
        }
    });

new Vue({
    el: '#app'
});

查看：

extends('layouts.app')

@section('content')

    <div id="app">
        <game v-bind:gameid="{{$gameid}}"></game>
    </div>

    <template id="game-template">
        <div>
            <strong>Result:</strong> @{{ result }}

        </div>
    </template>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.js"></script>

    <script src="../js/play.js"></script>

    @endsection

Answer 1

1 == true //true
1 === true // false

我认为问题可能在于HTTP返回true而不是1。

Answer 2

我认为＆＃39;这个＆＃39;关键字的价值与您预期的不同。试试这种方法：

＆＃13;

loadGame: function () {
  let self = this;
  this.$http.get('../api/games/ready/' + self.gameid).then(function (response) {
     if (response.body === '1') {
       var result = Math.floor((Math.random() * 2) + 1);
       self.result = result;
     }
   });
}

＆＃13;

Vue.Js - 数据未更新

2 个答案: