[Vue warn]: Error in render: “TypeError: Cannot read property 'name' of undefined”

1
votes

I can't figure out why this error is coming.

Another error is coming:

TypeError: Cannot read property 'name' of undefined

This is my Vue File:

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

In script tag:

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)
        }
      }
}
1
vue.jsvuejs2axiosvuetify.js
Can you share an error response. It is possible that the response doesn't have an errors key and this could be the cause for your error. – Radu Diță
When does this error show? As soon as mounted or after signup()? – Harshal Patil
POST localhost:8000/api/auth/signup 500 (Internal Server Error) – Mr. Perfectionist
When I am clicking on the submit button then it is giving this error. – Mr. Perfectionist

1 Answers

0
votes

In error object there is no such property as "name" that is why is giving u the error at the time of rendering. Also in html section do this - > v-if="errors.name != ''"

please change the data property as - 

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

}