vue jsの値を更新する

Question

プレースホルダ（currentUsername）を、ページのロード/レンダリング後に実際の値と非同期に更新したいとします。

私はサンプルプロジェクト（https://github.com/jackfranklin/vue2-demo-proj）に従ってみましたが、セットアップと関連付けることはできません。 vuejs 2.0の使用。 イベントが発生し、呼び出しが行われ、何かが返されたことがわかります。Chromeコンソールにエラーは表示されませんが、UIでは何も更新されません。何故ですか？

1）htmlファイル：

<script src="assets/js/data.js"></script> 

2）data.js：

"use strict"; 

import * as DataXXX from './data.vue'; 
Vue.component("dataxxx", DataXXX); 

var vm = new Vue({ 
    el: "#app", 
}); 

3）data.vue

<template> 

    <div> 
    <p v-if="currentUsername == null"> 
     Null username 
    </p> 
    <p v-else> 
     Username: {{ currentUsername }}: 
    </p> 
    </div> 

</template> 

<script> 
    "use strict"; 

    export default 
    { 
    created() 
    { 
     awr.EventsBus.$on("requestLoadData", this.loadData); 

     awr.EventsBus.$emit("requestLoadData", this.loadData); 
    }, 

    destroyed() 
    { 
     awr.EventsBus.$off("requestLoadData", this.loadData); 
    }, 

    methods: 
    { 
     loadData(name) 
     { 
     alert("got event"); 

     this.currentUsername = name; 
     this.fetchGithubData(name); 
     }, 

     fetchGithubData(name) 
     { 
     const url = "http://127.0.0.1/getUsername.php"; 

     alert("requesting url: " + url); 

     fetch(url).then(response => response.text()).then(data => { 
      this.currentUsername = data; 

      console.log("got response: " + data); 
     }); 
     } 
    }, 
    data() { 
     return { 
      currentUsername: null 
     } 
    } 
    } 

</script> 

Answer 1

ザときに再評価されていない場合応答を受け取るので、プレースホルダはページに含まれません。 この行は、それを更新んが、それだけで示されていない：

<div> 
    Username: {{ currentUsername }} 
    </div 

：ような何かに this.currentUsername = data;

変更を