Vue -编辑和创建相同的格式

Question

在Laravel中，我尝试向Vue组件发送一些数据。如果用户从编辑URL转到组件，我们发送了一个数组，如果从create发送null。就像这样。

叶片视图

 <section id="app">
        <people-form-component :person="{{$person ?? 'null'}}"></people-form-component>
    </section>

这个过程是正确的，dd显示数据如果有数据，在其他情况下显示null。

数据阵列

{"id":1,"created_at":"2021-11-05T19:03:14.000000Z","updated_at":"2021-11-05T19:03:14.000000Z","name":"Eduardo Montoya","lastname":"Jurado","age":83,"dni":"19282246N","email":"juana02@example.com","id_car":8}

然后，我尝试获取这个支柱，并在组件中检查它，以显示/隐藏文本和调用函数。

人员表单组件(抱歉粘贴所有代码，但我认为是必要的)

  <template>
    <div class="center">
        <div
            class="w-1/2 bg-white rounded p-8 m-6 shadow-md rounded hover:shadow-2xl transition duration-500 ease-in-out">
            <h1 class="block w-full text-center text-gray-800 text-2xl font-bold mb-6">
               {{this.person!=''? 'Update' :'Create'}}</h1>
            <div v-if="errors" class="bg-red-500 text-white py-2 px-4 pr-0 rounded font-bold mb-4 shadow-lg">
                <div v-for="(v, k) in errors" :key="k">
                    <p v-for="error in v" :key="error" class="text-sm">
                        {{ error }}
                    </p>
                </div>
            </div>
            <div class="grid-4">
                <label class="label" for="name">Name</label>
                <input class="formInput" type="text" name="name" v-model="form.name" maxlength="50"
                    placeholder="Name...">
            </div>
            <div class="grid-4">
                <label class="label" for="last_name">Last Name</label>
                <input class="formInput" type="text" name="lastname" v-model="form.lastname" maxlength="12"
                    placeholder="Lastname...">
            </div>
            <div class="grid-4">
                <label class="label" for="age">Age</label>
                <input class="formInput" type="number" min="18" max="99" name="age" v-model="form.age"
                    placeholder="Age...">
            </div>
            <div class="grid-4">
                <label class="label" for="dni">DNI</label>
                <input class="formInput" type="text" name="dni" v-model="form.dni" maxlength="9" placeholder="DNI...">
            </div>
            <div class="grid-4">
                <label class="label" for="email">Email</label>
                <input class="formInput" type="email" name="email" v-model="form.email" maxlength="24"
                    placeholder="Email...">
            </div>
            <div class="grid-4">
                <label class="label" for="car">Cars</label>
                <v-select name="car" placeholder="Select car..." :options="options"></v-select>
            </div>
            <button @click="this.person!='' ? update(this.person.id) : store() "
                class="w-full bg-blue-400 hover:bg-blue-600 transition duration-500 ease-in-out text-white p-3 rounded"
                type="submit">{{this.person!=''? 'Update' :'Create'}}</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'PeopleForm',
        props: ['person'],
        data: function () {
            return {
                 form: {
                   name: this.person!=''? this.person.name : '',
                   lastname: this.person!=''? this.person.lastname :'',
                   age: this.person!=''? this.person.age:'',
                   dni: this.person!=''? this.person.dni:'',
                   email: this.person!=''? this.person.email:'',
                   id_car: 1,
                },
                errors: null,
                options: [
                    'foo',
                    'bar',
                    'baz'
                ]
            }
        },
        methods: {
            store: function () {
                axios.post("/people", this.form)
                    .then(() => {
                        this.$swal({
                            title: "People created",
                            icon: 'success',
                            toast: true,
                            showConfirmButton: false,
                            position: 'top-end',
                            timerProgressBar: true,
                            timer: 5000
                        })
                        this.form.splice(0);
                    }).catch((e) => {
                        if (e.response.data.message == "Error") {
                            this.$swal({
                                title: "Email or DNI already exist",
                                icon: 'error',
                                toast: true,
                                showConfirmButton: false,
                                position: 'top-end',
                                timerProgressBar: true,
                                timer: 5000
                            })
                        }
                        this.errors = e.response.data.errors;
                    });
            },
            update: function (id) {
                console.log(this.form);
                axios.patch("/people/" + id, this.form)
                    .then(() => {
                        axios.get('/people')
                    }).catch((e) => {
                        if (e.response.data.message == "Error") {
                            this.$swal({
                                title: "Email or DNI already exist",
                                icon: 'error',
                                toast: true,
                                showConfirmButton: false,
                                position: 'top-end',
                                timerProgressBar: true,
                                timer: 5000
                            })
                        }
                        this.errors = e.response.data.errors;
                    });
            }
        }
    }

</script>

第一个错误:当我在create路由中加载组件时，返回。

TypeError:无法读取null属性(读取“名称”)“

第二个错误:在update组件中单击update时返回。

TypeError:无法读取null属性(读取'person')“

我是vue的新手，我不知道怎样才能解决一些基本问题。有人能帮忙吗？

Answer 1

如果数据是用于更新或添加的，则可以在挂起的钩子检查中空活数据：

data () {
  return {
    form: {
       name: '',
       lastname: '',
       age: '',
       dni: '',
       email: '',
       id_car: null,
    },
    editing: false
  }
}
mounted() {
  if(this.person) {
    this.form = this.person
    this.editing = true
  }
}

在模板中，可以显示相应的按钮并触发相应的事件：

<button v-if="editing" @click="update(person.id)"
   class="w-full bg-blue-400 hover:bg-blue-600 transition duration-500 ease-in-out text-white p-3 rounded"
   type="submit">
  Update
</button>
<button v-else" @click="store()"
   class="w-full bg-blue-400 hover:bg-blue-600 transition duration-500 ease-in-out text-white p-3 rounded"
   type="submit">
  Create
</button>