samleserieux
5 months ago
26
0
Mix

Birdboard : patch project error.response

Posted 5 months ago by samleserieux

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 sign in or create an account to participate in this conversation.