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

Posted 2023-02-23

【中文标题】Nuxt.js 的 data() 中未定义变量

【英文标题】：Variable being undefined in data() in Nuxt.js

【发布时间】：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

      
    ;
  
;

【参考方案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: '' 
    ;