javascript - 组件的值未更新

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>

组件头.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

您需要访问profile Prop 使用 this.profile在组件的 JavaScript 部分内。

例如，这不起作用:

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

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

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

能够删除 this.模板中的内容不会转移到其他地方。这是模板语言特有的一个特性。在 <script>您需要包含 this. 部分就像在任何其他 JavaScript 代码中一样。 Props、数据、计算属性和方法都以这种方式作为 Vue 实例的属性进行访问。