组件的值未更新

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 () {

  if (typeof(profile) == 'undefined') {

    return [];

  }

  return profile.favoriteExpertise.proficient.slice(0, 3);

}

而不仅仅是profile你需要写this.profile.

将this.放入模板中的能力不会延续到其他地方。这特别是模板语言的一个特性。在该<script>部分中，您需要this.像在任何其他 JavaScript 代码中一样包含 。以这种方式，道具、数据、计算属性和方法都作为 Vue 实例的属性进行访问。