Nuxt.js 的 data() 中未定义变量答案

【问题标题】：Variable being undefined in data() in Nuxt.jsNuxt.js 的 data() 中未定义变量
【发布时间】：2021-01-13 05:45:12
【问题描述】：

由于某种原因，今天早上这给我带来了麻烦，我就是想不通为什么它不起作用。

我有一个变量“应用程序”设置等于我的 axios 调用返回的数据。我想在我的 data() 中包含“applications.name”作为字段以作为表单发送。但是，当我尝试此操作时，Vue 给我一个错误，提示“无法读取未定义的属性 'name'”。

{{applicants.name}} 和 {{applicants.role}} 正在模板中工作，所以我得到的不仅仅是空数据

另外，由于某种原因，data() 似乎也无法识别我的“this.loggedInUser.id”字段。（我已经导入了 Vuex 和 mapGetters）

感谢您的帮助！ :)

async asyncData({ $axios, params }) {
    try {
      let applicants = await $axios.$get(`/api/v1/apps/${params.id}/`);
      return { applicants };
    } catch (error) {
      console.log(error);
      return { applicants: [] };
    }
  },
data() {
    return {
      applicants: [],
      application: {
        name: this.applicants.name,
        status: null,
        company: null,
        role: this.applicants.role
        // user: this.loggedInUser.id

      }
    };
  }
};

【问题讨论】：

标签： vue.js vuejs2 vue-component vuex nuxt.js

【解决方案1】：

尝试将this作为参数传递给数据属性函数：


data(vm) { //refers to this keyword
    return {
      applicants: [],
      application: {
        name: vm.applicants.name,
        status: null,
        company: null,
        role: vm.applicants.role
        // user:vm.loggedInUser.id

      }
    };
  }

或将application 设为计算属性：

data() {
    return {
      applicants: [],
    
    };
  }
,
computed:{
    application(){
        return {
        name: this.applicants.name,
        status: null,
        company: null,
        role: this.applicants.role
        // user: this.loggedInUser.id

      }
    }
}

【讨论】：

计算属性解决方案对我有用，您介意解释一下为什么变量也可以存储在计算中吗？我只能在上面找到文档，其中显示了在 data() 中操作变量的方法。谢谢！
如果该数据依赖于其他数据，则应将其存储为计算属性，否则可以在数据选项中声明

【解决方案2】：

我假设在初始化数据时，值 applicants.name 和 loggedInUser.id 不存在。尝试像这样更改数据

data() {
    return {
        applicants: { name: '' },
        application: {
            name: this.applicants.name,
        },
        loggedInUser: { id: '' }
    };
}

【讨论】：