组件的值未更新

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>

Component 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对象。我通过在App.vue中使用this.profile = data;重新分配了配置文件变量。应该不会触发数据重新加载吗？

Answer 1

您需要在组件的JavaScript部分中使用profile访问this.profile道具。

例如，这将不起作用：

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

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

您需要写profile而不是this.profile。

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