Question

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

    <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.vue ---> 这是我用作此文件组件的另一个文件中的代码的另一部分

  <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>

Answer 1

您的验证规则不包含属性dataFields，但是您正在模板中调用$v.dataFields.name。由于未定义dataFields，因此错误Cannot read property 'name' of undefined有意义。

未经测试，但是如果您更改了验证功能以返回类似这样的内容，它应该可以工作：

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

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

    return validations;
}

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

1 个答案: