Question

当我尝试发布表单时返回错误。

表单在一个组件中，而另一个组件使用相同的结构，但不会产生任何错误。

我试图自己找出错误，但找不到解决方法。

<template>
      <div class="card" style="width: 18rem;margin:0 0 1rem 1rem;">
            <div class="card-body">
                  <h4 class="mt-3 text-center" style="cursor:pointer;" @click="show=!show" >Add list</h4>
                  <form v-show="show" @submit.prevent="submitList">
                        <div class="form-group">
                              <label>Title</label>
                              <input type="text" class="form-control" :class="{'is-invalid':errors.title}" v-model="form.title"/>
                              <p class="text-danger" v-if="errors.title" v-text="errors.title[0]"></p>
                        </div>
                        <button type="submit" class="btn btn-lg btn-success mb-4">Submit</button>
                  </form>
            </div>
      </div>
</template>

<script>
export default {
      data() {
            return {
                  show : false,
                  form: {
                        title: '',
                  },
                  errors: {}
            }
      },
      methods: {
            submitList() {
                  axios.post('/list', this.form)
                        .then(({data}) => {
                              this.$emit('newList', data),
                              this.form.title = '',
                              this.show = false,
                              this.errors = {}
                        })
                        .catch(error => {
                              this.errors = error.response.data.errors
                        })
            }
      }
}
</script>

渲染错误：“ TypeError：无法读取未定义的属性'title'”

Answer 1

在方法this开头的参考submitList，然后在axios响应中使用参考。

let that = this;

然后that.form.title;

submitList () {
  let that = this;
  axios.post('/list', this.form)
    .then(({ data }) => {
      that.$emit('newList', data),
        that.form.title = '',
        that.show = false,
        that.errors = {}
    })
    .catch(error => {
      that.errors = error.response.data.errors
    })
}

Answer 2

这里没有足够的信息来回答问题。由于这是一个渲染问题，我想这是其中的几行：

<input type="text" class="form-control" :class="{'is-invalid':errors.title}" v-model="form.title"/>
<p class="text-danger" v-if="errors.title" v-text="errors.title[0]"></p>

问题是您从catch方法中从后端得到什么。您可能应该记录该值并检查其格式是否符合您的想法。

browser extension是调试Vue的一个很好的工具，也许它将有助于解决问题。

如果这不能解决您的问题，则需要提供更多信息：

何时发生错误
数据属性出现时的值是什么
也许是更详尽的错误消息的屏幕截图

“ TypeError：无法读取未定义的属性'title'”

2 个答案: