更新 vue js 值

Question

我想在 loading/rendering 页面后用实际值异步更新占位符 (currentUsername)。

我尝试遵循示例项目 (https://github.com/jackfranklin/vue2-demo-proj)，但无法将其与我的设置相关联。使用 vue.js 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

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

将其更改为：

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

更新 vue js 值

Updating vue js value

vue.js

vue-component

vuejs2