[Vue warn]: Ошибка при рендеринге: «Ошибка типа: невозможно прочитать свойство 'name' из undefined"

Question

Я не могу понять, почему возникает эта ошибка.

Еще одна ошибка:

TypeError: Невозможно прочитать свойство 'name' из неопределенного

Это мой Vue файл:

<v-text-field 
      label="Name *" 
      type="text"
      v-model="form.name"
      required
  >
</v-text-field>

<div v-if="errors.name">
     <span class="red--text">{{ errors.name[0] }}</span>
</div>
</v-text-field>

В теге сценария:

export default{
      data() {
        return {
          form: {
            name: ''
          }, 
          errors: {}
        }
      },

      methods: {
        signup(){
          axios
            .post('/api/auth/signup', this.form)
            .then(result => console.log(result.data))
            .catch(err => this.errors = err.response.data.errors)
        }
      }
}

Answer 1

В объекте ошибки нет такого свойства, как «имя», поэтому выдает ошибку во время рендеринга.Также в разделе html сделайте это -> v-if = "errors.name! = ''"

, измените свойство данных как -

export default{
  data() {
    return {
      form: {
        name: ''
      }, 
      errors: {name:''}
    }
  },

  methods: {
    signup(){
      axios
        .post('/api/auth/signup', this.form)
        .then(result => console.log(result.data))
        .catch(err => this.errors.name = err.response.data.errors)
    }
  }

}