Vue.Js - 数据未更新 [英] Vue.Js - data not updating

问题描述

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

play.js

 Vue.component('game', {模板:'#游戏模板'，数据:函数(){返回 {准备好:空，结果:0}},道具:['gameid']，方法: {加载游戏:函数(){this.$http.get('../api/games/ready/' + this.gameid).then(function (response) {if (response.body === '1') {//在准备好游戏时处理硬币翻转var 结果 = Math.floor((Math.random() * 2) + 1);this.result = 结果；控制台日志(this.result);}}.bind(this));}},准备好:函数(){this.loadGame();设置间隔(函数(){this.loadGame();}.bind(this), 5000);}});新的 Vue({el: '#app'});

查看:

extends('layouts.app')@section('内容')<div id="应用程序"><game v-bind:gameid="{{$gameid}}"></game>

<模板id=游戏模板"><div><strong>结果:</strong>@{{ 结果 }}

</模板><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

解决方案

1 == true//true1 === 真//假

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

I am very new to Vue.Js so please forgive me for this newbie question. I have a result variable in my data() method, and when I try to update the result variable using this.result = result, in the browser, the original variable remains the same. I don'; know what I am doing wrong. I have googled for a few hours and found no answer. As always, any help is greatly appreciated. I don't know why my data isn't updating. here is my code;

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'
});

View:

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

解决方案

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

I think the problem may lies in the fact that HTTP returns true, not 1.

这篇关于Vue.Js - 数据未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！