Vue variable getting undefined inside component

Question

My variable is getting undefined inside component, can anyone Helps me?

The variable is: "professor.nome"

Basically I load my "professor" variable inside the carregarProfessores() method.

Is that a way to load the Titulo component after everything?

This is the component thais is not loading the variable:

    <Titulo
      :texto="
        professorId !== undefined
          ? 'Professor: ' + professor.nome
          : 'Todos os alunos'
      "
    />

If I try to access the var like this, works:

<h1>{{ professor.nome }}</h1>

This is my Vue code:

export default {
  components: {
    Titulo,
  },
  data() {
    return {
      professorId: this.$route.params.prof_id,
      nome: "",
      alunos: [],
      professor: [],
    };
  },
  created() {
    if (this.professorId) {
      this.carregarProfessores();

      this.$http
        .get("http://localhost:3000/alunos?professor.id=" + this.professorId)
        .then((res) => res.json())
        .then((alunos) => (this.alunos = alunos));
    } else {
      this.$http
        .get("http://localhost:3000/alunos")
        .then((res) => res.json())
        .then((alunos) => (this.alunos = alunos));
    }
  },
  props: {},
  methods: {
    carregarProfessores() {
      this.$http
        .get("http://localhost:3000/professores/" + this.professorId)
        .then((res) => res.json())
        .then((professor) => {
          this.professor = professor;
        });
    },
  },
};

Here is the Titulo component:

<template>
  <div>
    <h1>{{ titulo }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    texto: String,
  },
  data() {
    return {
      titulo: this.texto,
    };
  },
};
</script>

Answer 1

The problem is that your Titulo component is stateful. It takes a copy of the initial value of the prop texto but doesn't update it when it changes.

There's no need to take a copy in the first place, just use the prop itself in the template:

<template>
  <div>
    <h1>{{ texto }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    texto: String
  }
};
</script>

Answer 2

Try

data() {
    return {
      professorId: this.$route.params.prof_id || null, // changed
      nome: "",
      alunos: [],
      professor: null, // changed
    };
  },

Then

<Titulo
      :texto="
        professorId && professor
          ? 'Professor: ' + professor.nome
          : 'Todos os alunos'
      "
    />

Answer 3

As per your data. professor is array so you can not access nome direct.

So you have iterator over professor array or

<h1>{{ professor[0].nome }}</h1>