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

Question

嘿伙计

由于我是 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()

Answer 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 属性应正确更新。