变量未定义，除非包含在 setTimeout 中

Question

我有一个空表单，我想在已安装的生命周期挂钩中为活动用户设置“负责职员”输入。它看起来像这样：

<b-form-select
     v-model="form.responsible_clerk"
     :options="clerks"
     required
></b-form-select>

data() {
     return {
          form: {
               responsible_clerk: ""
          }
     }
},
computed: {
      user() {
           return this.$store.getters.getUser;
      }
},
mounted() {
     this.form.responsible_clerk = this.user.name + " " + this.user.lastname;
}

这对于 this.form.responsible_clerk 和 this.user 都显示为 undefined。

当我用 0ms 超时将挂载的钩子的内容包装在 setTimeout 中时，它会按预期工作。

mounted() {
     setTimeout(() => {
          this.form.responsible_clerk = this.user.name + " " + this.user.lastname;
     },0)
}

我还需要在其他几种情况下执行此操作，其中我覆盖了挂载钩子中的变量。 （例如，当使用 vue bootstrap 的 b-collapse 并在挂载时将所有折叠元素设置为 true 并在以管理员身份创建用户时自动设置用户的公司时，也在挂载时）

有人可以向我解释为什么会发生这种情况，以及如何防止反复使用 setTimeout。这对我来说没有意义，Vue 不应该这样工作。

编辑： getUser 是一个 vuex getter：

getUser(state) {
     return state.user;
}

编辑 2： 刚刚踏入它，又在做其他事情：

computed: {
    max() {
        return document.getElementById("collapse-header")
            .querySelectorAll('div')
            .length;
    }
}

这不起作用，用 setTimeout 包装它会...

Answer 1

只有你的user 是一个计算属性，你只是调用连接mounted 中的用户名和姓氏。当mounted 运行后，它就不再被调用。因此，当您设置超时时它会起作用，然后用户就有时间从商店中获取并可以显示。您可以使用watch 来监听user 的变化，然后设置值。由于您的表单是一个对象，我们需要收听deep，也许您还需要使用immediate。所以添加一个观察者：

watch: {
    user: {
        immediate:true,
        deep: true,
        handler(user) {
            this.$set(this.form, 'responsible_clerk', user.name + " " + user.lastname);
        }
    }
}