组件的值未更新

Question

我创建了一个 Vue 应用程序，其中有一个 HTTP 请求。数据返回后，我会更新配置文件值。但是使用此值的所有组件都不会重新加载。下面是更好地解释我想要完成的代码。

我有主要的 Vue 文件 App.vue：

<template>

  <div id="app">

    <Navigation />

    <Header :profile="profile" />

    <About :profile="profile" />

    <Services :profile="profile" />

  </div>

</template>

<script>

import Navigation from './components/Navigation.vue'

import Header from './components/Header.vue'

import About from './components/About.vue'

import Services from './components/Services.vue'

export default {

  name: 'app',

  components: {

    Navigation,

    Header,

    About,

    Services,

  },

  data() {

    return {

      profile: { }

    }

  },

  created() {

    this.getUserProfile()

  },

  methods: {

    getUserProfile: async function() {

      try {

        const response = await fetch('http://localhost:7070/v1/home');

        const data = await response.json();

        this.profile = data;

      } catch (error) {

        console.error(error);

      }

    }

  }

}

</script>

<style>

</style>

如您所见，我在开始时将变量配置文件设置为空对象。一旦应用程序进入挂载状态，我就可以通过 GET 请求检索配置文件数据。当我调试时，我可以清楚地看到数据不是一个空对象。响应包含所有数据。

正如您从应用程序文件中看到的，我导入了 4 个文件以向应用程序添加 4 个组件。所有组件都以相同的原理完成。

这是 navigation.vue 的内容：

<template>

  <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">

    <div class="container">

      <a class="navbar-brand js-scroll-trigger" href="#page-top">Home</a>

      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

      </button>

      <div class="collapse navbar-collapse" id="navbarResponsive">

        <ul class="navbar-nav ml-auto my-2 my-lg-0">

          <li class="nav-item">

            <a class="nav-link js-scroll-trigger" href="#about">About</a>

          </li>

          <li class="nav-item">

            <a class="nav-link js-scroll-trigger" href="#services">Services</a>

          </li>

Answer 1

您需要在组件的 JavaScript 部分中访问profileprop this.profile。例如，这行不通：skills: function () {&nbsp; if (typeof(profile) == 'undefined') {&nbsp; &nbsp; return [];&nbsp; }&nbsp; return profile.favoriteExpertise.proficient.slice(0, 3);}而不仅仅是profile你需要写this.profile.将this.放入模板中的能力不会延续到其他地方。这特别是模板语言的一个特性。在该<script>部分中，您需要this.像在任何其他 JavaScript 代码中一样包含 。以这种方式，道具、数据、计算属性和方法都作为 Vue 实例的属性进行访问。