[Vue警告]:渲染错误:“ TypeError:无法读取未定义的属性'名称'”

时间:2019-03-04 12:04:56

标签: vue.js vuejs2 axios vuetify.js

我不知道为什么会出现这个错误。

另一个错误即将出现:

  

TypeError:无法读取未定义的属性“名称”

这是我的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)
        }
      }
}

1 个答案:

答案 0 :(得分:0)

在错误对象中没有“名称”之类的属性,这就是为什么在渲染时给您错误的原因。 同样在html部分中执行此操作-> v-if =“ errors.name!=''”

请将data属性更改为-

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

}