更新 vue js 值答案

【问题标题】：Updating vue js value更新 vue js 值
【发布时间】：2017-09-09 14:12:37
【问题描述】：

我想在加载/呈现页面后用实际值异步更新占位符 (currentUsername)。

我尝试关注一个示例项目 (https://github.com/jackfranklin/vue2-demo-proj)，但无法将其与我的设置相关联。使用 vuejs 2.0。我可以看到事件被触发，调用并返回了一些东西，我的 Chrome 控制台上没有错误，但 UI 中没有任何更新。这是为什么呢？

1) html文件：

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

2) 数据.js：

"use strict";

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

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

3) 数据.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>

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

收到响应时不会重新评估 if，因此页面中不包含占位符。这一行确实更新了它，但只是没有显示：this.currentUsername = data;

将其更改为：

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

【讨论】：