Vue.Js - Daten werden nicht aktualisiert

Question

Ich bin sehr neu in Vue.Js, also bitte verzeih mir diese Neuling Frage. Ich habe eine result Variable in meiner data() Methode, und wenn ich versuche, die result Variable mit this.result = result im Browser zu aktualisieren, bleibt die ursprüngliche Variable gleich. Ich weiß nicht. weiß was ich falsch mache. Ich habe ein paar Stunden gegoogelt und keine Antwort gefunden. Wie immer wird jede Hilfe sehr geschätzt. Ich weiß nicht, warum meine Daten nicht aktualisiert werden. Hier ist mein 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' 
}); 

Ausblick:

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 

denke, ich kann das Problem liegt in der Tatsache, dass HTTP true zurückgibt, nicht 1.

Answer 2

Ich denke, das 'dieses' Schlüsselwort hat einen anderen Wert als Sie erwartet haben. Versuchen Sie diesen Ansatz:

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