Vue.js 无法读取属性'；名称'；“未定义”的定义；Vue JS

[tex]它在控制台上向我显示以下错误消息“无法读取未定义的属性'name'。我无法找到数据中的名称，即使其结构与验证函数中的相同。**强调文本*

    <template>
    <component v-bind:validationsRule="validations" v-bind:dataFields="dataFields" v-bind:is="currentStep.details"></component>
    <button class="btn" v-on:click="backStep" id="back">Back</button>
    <div v-show="$v.dataFields.name.$error">this has an error</div>
    <button class="btn" v-on:click="nextStep"  id="next">Next</button>
  </div>

</template>
<script>
import DetailsForm from './DetailsForm'
import DetailsForm1 from './DetailsForm1'
import { required } from 'vuelidate/lib/validators'

export default {
  name: 'ProductDetails',
  props: {
    step: {
      type: Array
    }
  },
  data: function () {
    return {
      items: [
        { stepTitle: 'Completed step', details: DetailsForm },
        { stepTitle: 'Step Two', details: DetailsForm1 },
        { stepTitle: 'Step Three', details: DetailsForm },
        { stepTitle: 'Step Four', details: DetailsForm }
      ],
      activeNumber: 0,
      dataFields: {
        id: null,
        hasDescription: false,
        name: '',
        description: ''
      },
      validations: function () {
        if (!this.dataFields.hasDescription) {
          return {
            name: {
              required
            }
          }
        } else {
          return {
            name: {
              required
            },
            description: {
              required
            }
          }
        }
      }
    }
  },

返回
这有一个错误
下一个
从“./DetailsForm”导入DetailsForm
从“./DetailsForm1”导入DetailsForm1
从“vuelidate/lib/validators”导入{required}
导出默认值{
名称：“ProductDetails”，
道具：{
步骤：{
类型：数组
}
},
数据：函数（）{
返回{
项目：[
{stepTitle:'已完成的步骤'，详细信息：DetailsForm}，
{stepTitle:'第二步'，详细信息：DetailsForm1}，
{stepTitle:'步骤三'，详细信息：DetailsForm}，
{stepTitle:'第四步'，详细信息：DetailsForm}
],
活动编号：0，
数据字段：{
id:null，
描述：错，
名称：“”，
说明：“”
},
验证：函数（）{
如果（！this.dataFields.hassdescription）{
返回{
姓名：{
必修的
}
}
}否则{
返回{
姓名：{
必修的
},
说明：{
必修的
}
}
}
}
}
},

这是另一个文件中的另一部分代码，我将它用作此文件的组件

  <template>
  <div>
    <div class="form-group" :class="{ 'form-group--error': $v.dataFields.name.$error}">
      <label class="form__label">Name</label>
      <input class="form__input" v-model.trim="$v.dataFields.name.$model"/>
      <div v-show="$v.dataFields.name.$error">This has an error</div>
    </div>
    <div class="form-group">
      <label class="form__label" for="hasDesc">Has description?</label>
      <div class="toggle">
        <input id="hasDesc" type="checkbox" v-model="hasDescription"/>
        <label for="hasDesc">
          <div class="toggle__switch"></div>
        </label>
      </div>
    </div>
    <div class="form-group" v-if="hasDescription" :class="{ 'form-group--error': $v.dataFields.description.$error}">
      <label class="form__label">Description</label>
      <input class="form__input" v-model.trim="$v.dataFields.description.$model"/>
    </div>
    <tree-view :data="$v" :options="{rootObjectKey: '$v', maxDepth: 2}"></tree-view>
  </div>
</template>
<script>

export default {
  name: 'DetailsForm',
  data () {
    return {
    }
  },
  props: {
    validationsRule: {
      type: Function,
      default: () => {
      }
    },
    dataFields: {
      type: Object
    }
  },
  validations () {
    return this.validationsRule()
  }
}
</script>

名称
这有一个错误
有描述吗？
描述
导出默认值{
名称：'DetailsForm'，
数据（）{
返回{
}
},
道具：{
验证规则：{
类型：功能，
默认值：（）=>{
}
},
数据字段：{
类型：对象
}
},
验证（）{
返回此值。validationsRule（）
}
}

您的验证规则不包含属性

数据字段

，但您正在模板中调用

$v.dataFields.name

。由于未定义

数据字段

，因此错误

无法读取未定义的属性“name”

未经测试，但如果您更改了validations函数以返回类似的内容，它应该可以工作：

validations: function () {
    var validations = {
        dataFields: {
            name: {
                required
            }
        }
    };            

    if (this.dataFields.hasDescription)
        validations.dataFields.description = { required };

    return validations;
}

您的验证规则不包含属性
数据字段
，但您正在模板中调用
$v.dataFields.name
。由于未定义
数据字段
，因此错误
无法读取未定义
的属性“name”

未经测试，但如果您更改了validations函数以返回类似的内容，它应该可以工作：

validations: function () {
    var validations = {
        dataFields: {
            name: {
                required
            }
        }
    };            

    if (this.dataFields.hasDescription)
        validations.dataFields.description = { required };

    return validations;
}

因此，我仍然有相同的错误。我编辑了我的文件，还添加了作为ProductDetails.vue中的组件使用的DetailsForm.vue文件。如果您现在可以检查它，则错误仍然出现。@Steve16351我仍然有相同的错误。我编辑了我的文件，还添加了我创建的DetailsForm.vue文件“我将其用作ProductDetails.vue中的一个组件。如果您现在可以检查它，则错误仍然显示为相同的。@steve16351”