时间戳

首页 > 解决方案 > 表单中的“TypeError：无法读取未定义的属性'标题'”

laravel - 表单中的“TypeError：无法读取未定义的属性'标题'”

问题描述

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

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

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

<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：无法读取未定义的属性‘标题’”

标签： laravelvue.js

解决方案

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

推荐阅读