Question

Vue 变量在组件内部未定义

2020-04-15

222

vue.js

我的变量在组件内未定义，有人可以帮助我吗？

变量是：“professor.nome”

基本上，我在 carregarProfessores() 方法内加载了我的“professor”变量。

这是在一切之后加载 Titulo 组件的方法吗？

这是未加载变量的组件：

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

如果我尝试像这样访问变量，则可以工作：

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

这是我的 Vue 代码：

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;
        });
    },
  },
};

这是 Titulo 组件：

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

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

Answer 1

问题是您的 Titulo 组件是有状态的。它获取 prop texto 的初始值的副本，但不会在其更改时更新它。

首先无需获取副本，只需在模板中使用 prop 本身即可：

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

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

Answer 2

尝试

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

然后

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

Answer 3

根据您的数据。教授是数组，因此您无法直接访问 nome。

因此，您有教授数组上的迭代器或

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