在 Laravel 中，我嘗試向 Vue 組件發送一些資料。如果用戶從編輯 URL 轉到組件，我們發送一個陣列，如果我們從創建 URL 轉到組件，我們發送空值。像這樣。
刀片視圖
<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":"[email protected]","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>
第一個錯誤：當我在創建路由中加載組件時回傳。
型別錯誤：無法讀取 null 的屬性（讀取“名稱”）”
第二個錯誤：當我單擊更新組件中的更新回傳時。
型別錯誤：無法讀取 null 的屬性（讀取 'person'）”
我是 vue 的新手，我不知道如何解決一些基本問題。那么，有人可以幫忙嗎？
uj5u.com熱心網友回復：
您可以將資料留空并在掛載鉤子中檢查它是否用于更新或添加：
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()"
hljs-operator">-full bg-blue-400 hover:bg-blue-600 transition duration-500 ease-in-out text-white p-3 rounded"
type="submit">
Create
</button>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/351649.html
標籤：javascript 拉拉维尔 Vue.js 公理