在 Vue JS 中使用计算与动态对象

Posted 2023-02-23

【中文标题】在 Vue JS 中使用计算与动态对象

【英文标题】：Using computed with dynamic objects in Vue JS

【发布时间】：2021-09-25 15:43:05

【问题描述】：

嘿伙计

由于我是 Vue JS 的新手，我几乎完成了一个简单的分阶段表单项目，但我在使用动态对象时遇到了麻烦

假设这是表单的最后阶段：

<template v-if="currentStage === 3">
  <h2>Step 3 - Additional Params</h2>
  <h3>Please fill all the parameters needed</h3>
  <div v-for="(param, key, index) in params" :key="key">
    <label class="inputLabel" :for="key">Please fill in  key  param</label> <span class="redStar">*</span>
    <input v-model="params[key]" :id="key">
    <span v-if="submitted && $v.params[key] && !$v.params[key].required" class="invalid-feedback">It's a required field, please fill it</span>
    <!--        <span v-if="v$.params[key].$errors[0]" class="invalid-feedback">  v$.params[key].$errors[0].$message  </span>-->
  </div>
  <button @click="updateStage(0)">Previous</button>
  <button @click="handleLastSubmit">Create</button>
</template>

在 Data() 内部，我创建了一个空对象，该对象注定要根据表单中某个字段的用户输入来实现，如下面的评论中所建议的：

 params() 
      if (this.jsonS.hasOwnProperty(this.tDetails.platform)) 
        for (const [key, value] of Object.entries(this.jsonS[this.tDetails.platform])) 
          this.params[key] = value;
        
      
      return this.params;
    ,

我尝试根据 vue 论坛这样的建议添加 required （内部计算）：

addRequiredValidation() 
      //Here I need somehow to add validations to params Object.
      for (const key in this.integrationParams) 
          this.$options.validations().integrationParams[key].required = required
         
      

并在验证中实现如下：

validations() 
  return 
    integrationParams: this.addRequiredValidation,
    trafficDetails: 
      brand: required, minLength: minLength(3),
      platform: required, minLength: minLength(3),
      whitelabel: required, minLength: minLength(3),
      country: required, minLength: minLength(2),
      campaignName: required, minLength: minLength(2)
    
  
,

最终得到这个错误：

TypeError：无法将 undefined 或 null 转换为对象 在 Function.keys()

【参考方案1】：

您可以使用另一个计算字段来获取您的参数。

computed: 
  params() 
      const params = ;
      if (this.jsonS.hasOwnProperty(this.tDetails.platform)) 
        for (const [key, value] of Object.entries(this.jsonS[this.tDetails.platform])) 
          params[key] = value;
        
      
      return params;
    

每当this.tDetails.platform 更改（即用户输入另一个平台）时，都应重新计算参数，并且您的 addRequired 属性应正确更新。

【讨论】：

当我使用我的“appendFields”函数时，我希望仅在表单的第 2 阶段完成时才实现 params 对象，之后我需要添加验证，这是我做不到的因为我不知道对象中有哪些键

我只需要能够向动态对象添加“必需”验证，我该怎么做？

所以用户在组件的“Stage-2”中进行了一些输入，然后“Stage-3”被解锁，此时您想要创建验证参数？您能否了解该案例，即第 2 阶段已成功完成并在那时更新您的参数？然后应该相应地更新使用这些参数的任何计算属性。

如果用户输入了一个存在的“this.tDetails.platform”，则表单的 stage3 将使用与 JSON 对象中“this.tDetails.platform”相同的键相应地呈现，但我无法弄清楚如何为其创建成功的验证。

您究竟使用什么进行验证？我将设置一个最小的示例来尝试模仿您的情况。