使用 vue-router 进行编程导航会产生错误

Question

我用 vue.js 创建了一个 SPA，在表单组件中希望在完成提交重定向到列表组件时发生 Uncaught (in promise) TypeError: Cannot read property 'data' of undefined.

如果有人可以更正我的代码，我不知道为什么会出现此错误，我希望能清楚地解释我做错了

<template>
    <div class="row center-element">
    <h1 class="pink-text center-align">{{title}}</h1>
    <form class="col s12 m12 " @submit.prevent="save">
      <div class="row ">
        <div class="input-field col s12 m12">
          <i class="material-icons prefix  light-blue-text">pets</i>
          <input id="name" type="text" class="validate" v-model="form.name">
          <label for="name">name</label>
        </div>
      </div>
      <div class="row">
        <div class="file-field input-field col s12 m12">
            <i class="material-icons prefix  light-blue-text">image</i>
            <input  id='image' type="file">
          <div class="file-path-wrapper ">
            <input class="file-path validate" type="text">
          </div>
        </div>
      </div>
      <div class="row right-align">
        <button class="btn-floating waves-effect waves-light light-blue " type="submit" name="action">
          <i class="material-icons right">send</i>
        </button>
        <router-link to="/" class="btn-floating waves-effect waves-light light-blue ">
          <i class="material-icons right">cancel</i>
        </router-link>
      </div>
    </form>
  </div>
</template>
<script>
  export default {
        data() {
            return{
            title:'Create',
            store: '/admin/animals',
                    method: 'post',
                form:{},
                errors:'',
                msm:''

            }

        },
        beforeMount() {
            if(this.$route.meta.mode === 'edit') {
                this.title = 'Edit'
                this.form.name =  this.$route.params.name
                this.store = 'animals/' + this.$route.params.id
                this.method = 'post'
            }
        },  
        methods:{
            save(){
                let vm = this
                let formData = new FormData();
                formData.append('name',this.form.name)
                formData.append('image',image.files[0])
          if (this.title==='Edit') {

           formData.append('_method', 'PATCH')
          }
                axios[this.method](this.store, formData).then(function(response) {
                    vm.$route.push('/list')
                }).catch(function(error) {
                    Vue.set(vm.$data, 'errors', error.response.data)
                })
            },
        }
    }
</script>

Answer 1

我设法解决了代码中的错误， 有几个错误：

1.行代码vm.$route.push('/list')，生成response.data属性未定义的错误

2.接收函数push()的参数是问题，我不得不改变'/list'变量重定向：'list'

    <template>
    <div class="row center-element">
    <h1 class="pink-text center-align">{{title}}</h1>
    <form class="col s12 m12 " @submit.prevent="save">
      <div class="row ">
        <div class="input-field col s12 m12">
          <i class="material-icons prefix  light-blue-text">pets</i>
          <input id="name" type="text" class="validate" v-model="form.name">
          <label for="name">name</label>
        </div>
      </div>
      <div class="row">
        <div class="file-field input-field col s12 m12">
            <i class="material-icons prefix  light-blue-text">image</i>
            <input  id='image' type="file">
          <div class="file-path-wrapper ">
            <input class="file-path validate" type="text">
          </div>
        </div>
      </div>
      <div class="row right-align">
        <button class="btn-floating waves-effect waves-light light-blue " type="submit" name="action">
          <i class="material-icons right">send</i>
        </button>
        <router-link to="/" class="btn-floating waves-effect waves-light light-blue ">
          <i class="material-icons right">cancel</i>
        </router-link>
      </div>
    </form>
  </div>
</template>
<script>
  export default {
        data() {
            return{
            title:'Create',
            store: '/admin/animals',
                    method: 'post',
                form:{},
                errors:'',
                msm:'',
            redirect:'/'

            }

        },
        beforeMount() {
            if(this.$route.meta.mode === 'edit') {
                this.title = 'Edit'
                this.form.name =  this.$route.params.name
                this.store = 'animals/' + this.$route.params.id
                this.method = 'post'
            }
        },  
        methods:{
            save(){
                let vm = this
                let formData = new FormData();
                formData.append('name',this.form.name)
                formData.append('image',image.files[0])
          if (this.title==='Edit') {

           formData.append('_method', 'PATCH')
          }
                axios[this.method](this.store, formData).then(function(response) {
                     Vue.set(vm.$data,'msm',response.data)
                  vm.$router.push(vm.redirect)
                }).catch(function(error) {
                    Vue.set(vm.$data, 'errors', error)
                })
            },
        }
    }
</script>