Component's values not being updated

Question

I created a Vue app, where I have a single HTTP request. Once the data returns, I update the profile value. But all components using this value do not get reloaded. Below is the code to better explain what I am trying to accomplish.

I have the main Vue file 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>

As you can see, I set the variable profile to empty object at the start. And once the app enters the mounted state, I can the GET request to retrieve the profile data. When I debug, I can clearly see data is not an empty object. The response contains all data.

As you can see from the app file, I import 4 files to add 4 components to the app. All components are done in the same principle.

Here is the navigation.vue content:

<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>

Component 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>

Component 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>

Can anyone tell what could be wrong? Should I change my approach? Is there a better way to do this in Vue? As said, I retrieve the profile JSON object from the backend. I reassign the profile variable by using this.profile = data; in App.vue. Should this not trigger a reload of data?

Answer 1

You need to access the profile prop using this.profile within the JavaScript portion of you component.

For example, this won't work:

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

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

Instead of just profile you need to write this.profile.

The ability to drop the this. in the template does not carry over to elsewhere. That's specifically a feature of the templating language. In the <script> section you need to include the this. just like you would in any other JavaScript code. Props, data, computed properties and methods are all accessed as properties of the Vue instance in this way.