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

当您收到回复时，if isn不会被重新评估，因此占位符不会包含在页面中。这行已更新，但它没有显示：this.currentUsername = data;

将其更改为：

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

更新vue js值

1 个答案: