正文 

当前位置： 首页 > 问答 >

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

     2023-02-23     205

关键词：

【中文标题】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: '' 
    ;

【讨论】：

getParameter 方法中未定义的变量

】getParameter方法中未定义的变量【英文标题】：variableundefindedinsetParametermethod【发布时间】：2014-03-1116:10:53【问题描述】：我在控制器中有下一个代码来处理表单，但我收到一条错误消息，显示“未定义的变量：页面”。虽然$pag... 查看详情

类中未定义的函数或变量

】类中未定义的函数或变量【英文标题】：undefinedfunctionorvariableinclass【发布时间】：2014-04-1821:07:41【问题描述】：如何输出类属性以便在MATLAB的终端中访问？在我的例子中，ClassA存储p数组并显示如下输出：ClassAwithproperties:p:[3x3d... 查看详情

错误：laravel 视图中未定义的变量

】错误：laravel视图中未定义的变量【英文标题】：Error:undefinedvariableinlaravelview【发布时间】：2017-01-2315:05:21【问题描述】：我收到此错误：未定义的变量。我阅读了很多关于它的帖子，但是没有一个对我面临的问题有帮助。(WhyI... 查看详情

PHP中未定义的类变量

】PHP中未定义的类变量【英文标题】：UndefinedclassvariableinPHP【发布时间】：2012-03-0416:57:59【问题描述】：我已经创建了一个单独的类来连接我的数据库，并且该类在一个单独的PHP文件中：connect.phpclassconnectfunction__construct()//Connectt... 查看详情

为啥我的变量在 useEffect 中定义的其他地方在反应中未定义？

】为啥我的变量在useEffect中定义的其他地方在反应中未定义？【英文标题】：WhyismyvariabledefinedinuseEffectelsewhereundefinedinreact?为什么我的变量在useEffect中定义的其他地方在反应中未定义？【发布时间】：2021-09-3003:38:59【问题描述】... 查看详情

手动传递的 Angular 路由变量在组件中未定义

】手动传递的Angular路由变量在组件中未定义【英文标题】：Manually-passedAngularroutevariablegetsundefinedincomponent【发布时间】：2018-12-1920:13:40【问题描述】：在我的Angular组件中，我试图获取一个从路由中手动传递的变量。我遵循了本... 查看详情

JBuilder中未定义的局部变量或方法“json”

】JBuilder中未定义的局部变量或方法“json”【英文标题】：undefinedlocalvariableormethod`json\'inJBuilder【发布时间】：2013-01-0821:08:00【问题描述】：当我尝试获取所有类别（索引操作）时出现错误：undefinedlocalvariableormethod`json\'但是在表... 查看详情

Laravel 7：foreach 循环中未定义的变量

】Laravel7：foreach循环中未定义的变量【英文标题】：Laravel7:Undefinedvariableinforeachloop【发布时间】：2020-11-0320:44:42【问题描述】：我想显示以从我的预算分配create.blade.php模板中的校园表中选择校园，但它显示错误。create.blade.php<... 查看详情

如何在 nuxt.js 中定义路由

】如何在nuxt.js中定义路由【英文标题】：Howtodefinerouteinnuxt.js【发布时间】：2019-04-2421:11:53【问题描述】：我有一个使用Nuxt.Js的博客网站，假设xyz.com并希望显示特定国家/地区代码的所有页面，例如xyz.com/en/home、xyz.com/en/about等。... 查看详情

foreach 语句导致多文件上传中未定义的变量 fileNameToStore

】foreach语句导致多文件上传中未定义的变量fileNameToStore【英文标题】：foreachstatementcausesundefinedvariablefileNameToStoreinmultiplefileupload【发布时间】：2021-04-0811:00:33【问题描述】：我尝试上传多个文件，因此我尝试稍微修改代码。但每... 查看详情

指令的angularjs typescript控制器类中未定义的范围变量

】指令的angularjstypescript控制器类中未定义的范围变量【英文标题】：ScopeVariableundefinedinangularjstypescriptcontrollerclassofdirective【发布时间】：2016-05-2515:31:41【问题描述】：我已经在ag网格上创建了​​包装器指令，如下所示functionMyDi... 查看详情

如何访问 Nuxt 插件中的 .env 变量？

】如何访问Nuxt插件中的.env变量？【英文标题】：Howtoaccess.envvariablesinaNuxtplugin?【发布时间】：2021-08-0701:37:13【问题描述】：SegmentAnalytics提供了一个带有秘密API密钥的sn-p。在我的Nuxt.js项目中，我创建了一个名为segment.js的插件，... 查看详情

我可以在析构函数中使用头文件中未定义的变量吗？

】我可以在析构函数中使用头文件中未定义的变量吗？【英文标题】：CanIuseavariableindestructorthatisnotdefinedintheheaderfile?【发布时间】：2015-12-2717:14:24【问题描述】：我一直在从我的一个班级阅读这段代码。并且对析构函数中的一个... 查看详情

Nuxt.js 中的“文档未定义”

】Nuxt.js中的“文档未定义”【英文标题】："documentisnotdefined"inNuxt.js【发布时间】：2018-02-1323:03:02【问题描述】：我正在尝试在Vue组件中使用Choices.js。组件编译成功，但随后触发错误：[vue-router]无法解析异步组件默认值... 查看详情

pdo 变量在 mysql 函数中未定义

】pdo变量在mysql函数中未定义【英文标题】：pdovariableisundefinedinmysqlfunction【发布时间】：2017-08-2122:23:31【问题描述】：我有一个index.php，它是这样的：require_once("../resources/config.php");require_once(LIBRARY_PATH."/mysql.php");...if(checkIfMailExist... 查看详情

如何在 React 和 Next.js 的 useEffect 中跟踪依赖列表中未定义变量的值

】如何在React和Next.js的useEffect中跟踪依赖列表中未定义变量的值【英文标题】：HowtotrackvalueofundefinedvariableindependencylistinuseEffectinReactandNext.js【发布时间】：2021-04-2522:16:28【问题描述】：我还有一个问题：我想跟踪未定义变量window... 查看详情

Nuxt.js - 全局导入自定义 NPM 包

】Nuxt.js-全局导入自定义NPM包【英文标题】：Nuxt.js-GloballyimportcustomNPMpackages【发布时间】：2021-06-0218:29:48【问题描述】：Nuxt的插件/模块系统非常复杂，因此我无法完成这个非常简单的任务，即使在SO上查看了其他一些答案之后也... 查看详情

Nuxt.js 自定义加载器不会立即加载

】Nuxt.js自定义加载器不会立即加载【英文标题】：Nuxt.jscustomloadernotloadinginstantly【发布时间】：2021-06-0403:28:46【问题描述】：所以我的自定义加载器不会像瞬间加载那样立即加载，然后它在这里加载是我的网站，我的目标是加载... 查看详情