May 13, 2019
0
Level 3
Birdboard : patch project error.response
Hi all, I just finished the course "Build A Laravel App With TDD", i try to implement a modal for editing a project, i reused the code we made during the lesson 42 and 43, so i reused the form object we made. Everything is working fine, my project is updated but the page is never reload and i get an error in the console "error.response is undefined" Here is my code of the modal :
Let's edit this !
<form @submit.prevent="submit"> Title <div class="mb-4">
<label for="description" class="text-sm block">Description</label>
<textarea id="description"
class="border bg-card text-default my-2 p-2 text-xs block w-full rounded"
:class="form.errors.description ? 'border-red' : 'border-orange'"
rows="10"
v-model="form.description">
</textarea>
<span class="text-xs italic text-red" v-if="form.errors.description"
v-text="form.errors.description[0]"></span>
</div>
</div>
</div>
<footer class="flex justify-end mt-4">
<button type="button" class="button mr-4" @click="$modal.hide('editProject')">Cancel</button>
<button type="submit" class="button">Confirm</button>
</footer>
</form>
</modal>
import AstroForm from './AstroForm';
export default {
props: ['projectPath', 'projectTitle', 'projectDescription'],
data() {
return {
form: new AstroForm({
title: this.projectTitle,
description: this.projectDescription,
})
}
},
methods: {
async submit() {
this.form.update(this.projectPath)
.then(response => location = this.projectPath);
}
}
}
---
And here is my code of the form :
class AstroForm { constructor(data) { this.originalData = JSON.parse(JSON.stringify(data));
Object.assign(this, data);
this.errors = {};
this.submitted = false;
}
data() {
let data = {};
for (let attribute in this.originalData) {
data[attribute] = this[attribute];
}
return data;
}
submit(endpoint) {
return axios.post(endpoint, this.data())
.catch(this.onFail.bind(this))
.then(this.onSuccess.bind(this));
}
update(endpoint) {
return axios.patch(endpoint, this.data())
.catch(this.onFail.bind(this))
.then(this.onSuccess.bind(this));
}
onSuccess(response) {
this.submitted = true;
this.errors = {};
return response;
}
onFail(error) {
this.errors = error.response.data.errors;
this.submitted = false;
throw error;
}
reset() {
object.assign(this, this.originalData);
}
}
export default AstroForm;
Hope you can help me.
Please or to participate in this conversation.