Vue JS - 在 created() 和条件渲染中更改数据

Question

我的组件中有一个变量alumnoIncoming ，默认情况下为false ，在created()中，我分配了一个作为查询传递的值，通过路由器推送。 我有一个 div 仅当该变量为真时才使用v-if有条件地呈现，但它总是呈现，即使它是假的。

当我用{{ alumnoIncoming }}显示它时，变量的实际值是正确的，但如果我有条件地检查它，就像这样： {{ alumnoIncoming? "incoming": "outgoing" }} {{ alumnoIncoming? "incoming": "outgoing" }} ，它总是评估为真。

如果我使用单击按钮时执行的方法更改变量，则条件会正确更新。

这是我的组件的完整代码：

<template>
  <div>
    <div v-if="alumnoIncoming">
      esto solo se muestra si alumnoIncoming = true -> {{ alumnoIncoming }}
    </div>
    <div>
      <span >sin i18n : {{alumnoIncoming}} {{ alumnoIncoming ? "incoming" : "outgoing" }} </span>
    </div>
    <div >
    </div>
    <Button label="cambiar" @click="cambiar" />
  </div>
</template>

<script>
import Button from "primevue/button";

export default {
  data() {
    return {
      alumnoIncoming: false,
    };
  },
  created() {
    this.recibeParametros();
  },
  methods: {
    recibeParametros() {
      console.log(this.$route.query);
      this.alumnoIncoming = this.$route.query.alumnoIncoming;
    },
    cambiar() {
      this.alumnoIncoming = !this.alumnoIncoming;
    },
  },
  components: {
    Button,
  },
};
</script>

为什么第一次渲染组件时没有得到正确的变量值？

Answer 1

问题是在路由器推送中作为查询传递的值是一个字符串，而不是 boolean，所以它总是评估为真。 为了解决这个问题，我们必须解析字符串：

    recibeParametros() {
      this.alumnoIncoming = (this.$route.query.alumnoIncoming === "true");
    },