組件的值未更新

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>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#career">Career</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</template>

<script>
</script>

<style scoped>
</style>

組件header.vue：

<template>
  <header class="masthead">
    <div class="container h-100">
      <div class="row h-100 align-items-center justify-content-center text-center">
        <div class="col-lg-10 align-self-end">
          <h1 class="text-uppercase text-white font-weight-bold">{{ fullName }}</h1>
          <h2 class="text-uppercase text-white font-weight-bold">{{ profession }}</h2>
          <hr class="divider my-4">
        </div>
        <div class="col-lg-8 align-self-baseline">
          <p class="text-white-75 font-weight-light mb-5">{{ oneLiner }}</p>
          <a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find Out More</a>
        </div>
      </div>
    </div>
  </header>
</template>

<script>

  export default {
    props: {
      profile: Object
    },

    computed: {
      fullName: function () {
        if (typeof(profile) == 'undefined') {
          return 'Jernej Klancic';
        }

        return profile.firstname + ' ' + profile.lastname;
      },

      profession: function() {
        if (typeof(profile) == 'undefined') {
          return 'Developer';
        }

        return profile.profession;
      },

      oneLiner: function() {
        if (typeof(profile) == 'undefined') {
          return '';
        }

        return profile.oneLiner;
      }
    }
  }

</script>

<style scoped>
</style>

組件about.vue：

<template>
  <section class="page-section bg-primary" id="about">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-8 text-center">
          <h2 class="text-white mt-0">About</h2>
          <hr class="divider light my-4">
          <p class="text-white-50 mb-4">{{ aboutMe }}</p>
          <a class="btn btn-light btn-xl js-scroll-trigger" href="#services">Expertise</a>
        </div>
      </div>
    </div>
  </section>
</template>

<script>

  export default {
    props: {
      profile: Object
    },

    computed: {
      aboutMe: function () {
        if (typeof(profile) == 'undefined') {
          return '';
        }

        return profile.aboutMe;
      }
    }
  }

</script>

<style scoped>
</style>

組件service.vue：

<template>
  <section class="page-section" id="services">
    <div class="container">
      <h2 class="text-center mt-0">At Your Service</h2>
      <hr class="divider my-4">
      <div class="row">
        <div v-for="skill in skills" v-bind:key="uuid" class="col-lg-3 col-md-6 text-center">
          <div class="mt-5">
            <i v-bind:class="fontAwesomeDecorator(skill)"></i>
            <h3 class="h4 mb-2">{{ skill.type }}</h3>
            <p class="text-muted mb-0">{{ skillLevel(skill) }}</p>
          </div>
        </div>
        <div class="col-lg-3 col-md-6 text-center">
          <div class="mt-5">
            <i class="fas fa-4x fa-laptop-code text-primary mb-4"></i>
            <h3 class="h4 mb-2">Other</h3>
            <p class="text-muted mb-0">Always eager to learn new language or framework</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>

  export default {
    props: {
      profile: Object
    },

    computed: {
      skills: function () {
        if (typeof(profile) == 'undefined') {
          return [];
        }

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

    methods: {

      fontAwesomeDecorator: function(skill) {
        var style = ['fab', 'fa-4x', 'text-primary', 'mb-4'];
        var uppercase = skill.type.toUpperCase();

        if (uppercase === 'JAVA') {
          style.push('fa-java');
        }

        if(uppercase === 'JAVASCRIPT') {
          style.push('fa-js');
        }

        if(uppercase === 'ANDROID') {
          style.push('fa-android');
        }

        return style;
      },

      skillLevel: function(skill) {

        switch(skill.rating) {
          case 10:
            return `Living and breathing ${skill.type} code`;
          case 9:
            return `${skill.type} marksmen`;
          case 8:
            return `Bug slayer in the ${skill.type} realm`;
          case 7:
            return `${skill.type} fanboy`;
          case 6:
            return `Level ${skill.rating} ${skill.type} wizard`;
          case 5:
            return `${skill.type} nerd`;
          default:
            return `${skill.type} motivator stage ${skill.type}`;
        }
      }
    }
  }

</script>

<style scoped>
</style>

誰能告訴我可能出什么問題了？ 我應該改變方式嗎？ 在Vue中有更好的方法嗎？ 如前所述，我從后端檢索配置文件JSON對象。 我使用this.profile = data;重新分配了profile變量this.profile = data; 在App.vue中。 是否應該不會觸發數據重新加載？

Answer 1

您需要在組件的JavaScript部分中使用this.profile訪問profile 。

例如，這將不起作用：

skills: function () {
  if (typeof(profile) == 'undefined') {
    return [];
  }

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

不僅需要profile還需要編寫this.profile 。

刪除this. 模板中的內容不會轉移到其他位置。 這是模板語言的特有功能。 在<script>部分中，您需要包括this. 就像使用其他任何JavaScript代碼一樣。 道具，數據，計算的屬性和方法都以這種方式作為Vue實例的屬性進行訪問。