Невозможно прочитать свойство "имя" неопределенного "Vue JS - PullRequest
Новая
       1

Невозможно прочитать свойство "имя" неопределенного "Vue JS

1 голос
/ 19 июня 2020

[tex] Он показывает мне на консоли следующее сообщение об ошибке «Невозможно прочитать свойство 'name' of undefined». Я не могу обратиться к имени в моих данных, даже если оно структурировано так же, как в моей функции проверки. ** выделенный текст *

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

1 Ответ

0 голосов
/ 19 июня 2020

Ваши правила проверки не содержат свойства 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;
}
...