I am developing a simple CMS and I’m using Vue for the frontend and Laravel for the backend. I have used the Object Orientated forms videos as a guidance on how best to use my forms and I have included most of what the video goes over.
Everything works and viewing records and showing index (list of records) works no problem. but I am now looking at editing records and running into an issue. I can grab the data I want to edit via Axios without problem, but when assigning the returned data I am getting two errors
‘[Vue warn]: Error when rendering anonymous component at /Users/craigward/Site/project1/resources/assets/secure/js/views/organisations-edit.vue: ‘
and
‘Uncaught TypeError: Cannot read property ‘has’ of undefined’
The problem is when I include
mounted() { axios.get(‘/secure/organisation/’+this.$route.params.id).then(response => this.form = response.data); },
specifically .then(response => this.form = response.data) is the error. However, .then(response => console.log(response.data)); doesn’t generate an error.
I can’t figure it out and im on a deadline. Im not sure if I should cary on with Vue or revisit later and just go back to standard css/js with Laravel.
Any help would be very much appreciated.
Full file I am working with is below
<template> <span> <hero> <template slot=”page_title”>Organisations</template> <template slot=”page_subtitle”>My subtitle</template> </hero> <section class=”section”> <div class=”container”> <form @submit.prevent=”onSubmit” @keydown=”form.errors.clear($event.target.name)”> <label class=”label”>Name</label> <div class=”control”> <input class=”input” type=”text” name=”name” placeholder=”name” v-model=”form.name”> <span class=”help is-danger” v-if=”form.errors.has(‘name’)” v-text=”form.errors.get(‘name’)”></span> </div> <label class=”label”>slug</label> <div class=”control”> <input class=”input” type=”text” name=”slug” placeholder=”slug” v-model=”slug” disabled=”disabled”> <span class=”help is-danger” v-if=”form.errors.has(‘slug’)” v-text=”form.errors.get(‘slug’)”></span> </div> <label class=”label”>postcode</label> <div class=”control”> <input class=”input” type=”text” name=”postcode” placeholder=”postcode” v-model=”form.postcode”> <span class=”help is-danger” v-if=”form.errors.has(‘postcode’)” v-text=”form.errors.get(‘postcode’)”></span> </div> <label class=”label”>lat</label> <div class=”control”> <input class=”input” type=”text” name=”lat” placeholder=”lat” v-model=”form.lat”> <span class=”help is-danger” v-if=”form.errors.has(‘lat’)” v-text=”form.errors.get(‘lat’)”></span> </div> <label class=”label”>long</label> <div class=”control”> <input class=”input” type=”text” name=”long” placeholder=”long” v-model=”form.long”> <span class=”help is-danger” v-if=”form.errors.has(‘long’)” v-text=”form.errors.get(‘long’)”></span> </div> <label class=”label”>address_line_1</label> <div class=”control”> <input class=”input” type=”text” name=”address_line_1″ placeholder=”address_line_1″ v-model=”form.address_line_1″> <span class=”help is-danger” v-if=”form.errors.has(‘address_line_1’)” v-text=”form.errors.get(‘address_line_1’)”></span> </div> <label class=”label”>address_line_2</label> <div class=”control”> <input class=”input” type=”text” name=”address_line_2″ placeholder=”address_line_2″ v-model=”form.address_line_2″> <span class=”help is-danger” v-if=”form.errors.has(‘address_line_2’)” v-text=”form.errors.get(‘address_line_2’)”></span> </div> <label class=”label”>town</label> <div class=”control”> <input class=”input” type=”text” name=”town” placeholder=”town” v-model=”form.town”> <span class=”help is-danger” v-if=”form.errors.has(‘town’)” v-text=”form.errors.get(‘town’)”></span> </div> <label class=”label”>city</label> <div class=”control”> <input class=”input” type=”text” name=”city” placeholder=”city” v-model=”form.city”> <span class=”help is-danger” v-if=”form.errors.has(‘city’)” v-text=”form.errors.get(‘city’)”></span> </div> <label class=”label”>county</label> <div class=”control”> <input class=”input” type=”text” name=”county” placeholder=”county” v-model=”form.county”> <span class=”help is-danger” v-if=”form.errors.has(‘county’)” v-text=”form.errors.get(‘county’)”></span> </div> <label class=”label”>phone_number</label> <div class=”control”> <input class=”input” type=”text” name=”phone_number” placeholder=”phone_number” v-model=”form.phone_number”> <span class=”help is-danger” v-if=”form.errors.has(‘phone_number’)” v-text=”form.errors.get(‘phone_number’)”></span> </div> <label class=”label”>email</label> <div class=”control”> <input class=”input” type=”text” name=”email” placeholder=”email” v-model=”form.email”> <span class=”help is-danger” v-if=”form.errors.has(’email’)” v-text=”form.errors.get(’email’)”></span> </div> <label class=”label”>facebook</label> <div class=”control”> <input class=”input” type=”text” name=”facebook” placeholder=”facebook” v-model=”form.facebook”> <span class=”help is-danger” v-if=”form.errors.has(‘facebook’)” v-text=”form.errors.get(‘facebook’)”></span> </div> <label class=”label”>twitter</label> <div class=”control”> <input class=”input” type=”text” name=”twitter” placeholder=”twitter” v-model=”form.twitter”> <span class=”help is-danger” v-if=”form.errors.has(‘twitter’)” v-text=”form.errors.get(‘twitter’)”></span> </div> <label class=”label”>url</label> <div class=”control”> <input class=”input” type=”text” name=”url” placeholder=”url” v-model=”form.url”> <span class=”help is-danger” v-if=”form.errors.has(‘url’)” v-text=”form.errors.get(‘url’)”></span> </div> <div class=”control”> <label class=”checkbox” for=”remote”> <input type=”checkbox” name=”remote” v-model=”form.remote” value=”1″> Is remote </label> <span class=”help is-danger” v-if=”form.errors.has(‘remote’)” v-text=”form.errors.get(‘remote’)”></span> </div> <div class=”control”> <label class=”checkbox” for=”headoffice”> <input type=”checkbox” name=”headoffice” v-model=”form.headoffice” value=”1″> Head office </label> <span class=”help is-danger” v-if=”form.errors.has(‘headoffice’)” v-text=”form.errors.get(‘headoffice’)”></span> </div> <label class=”label”>description</label> <div class=”control”> <textarea class=”textarea” name=”description” placeholder=”description” v-model=”form.description”></textarea> <span class=”help is-danger” v-if=”form.errors.has(‘description’)” v-text=”form.errors.get(‘description’)”></span> </div> <label class=”label”>excerpt</label> <div class=”control”> <textarea class=”textarea” name=”excerpt” placeholder=”excerpt” v-model=”form.excerpt”></textarea> <span class=”help is-danger” v-if=”form.errors.has(‘excerpt’)” v-text=”form.errors.get(‘excerpt’)”></span> </div> <div class=”control”> <button class=”button is-primary” :disabled=”form.errors.any()”>Save</button> <button class=”button is-primary”>go</button> </div> </form> </div> </section> </span> </template> <script> import hero from ‘../components/hero’; import {Form} from ‘../helpers/form.js’; export default { components: { hero }, data() { return { form: new Form({ name: ”, slug: ”, postcode: ”, lat: ”, long: ”, address_line_1: ”, address_line_2: ”, town: ”, city: ”, county: ”, phone_number: ”, email: ”, facebook: ”, twitter: ”, url: ”, remote: ”, headoffice: ”, description: ”, excerpt: ” }) } }, computed: { slug: function() { let slug = this.sanitizeTitle(this.form.name); return slug; } }, mounted() { axios.get(‘/secure/organisation/’+this.$route.params.id).then(response => this.form = response.data); }, methods: { onSubmit() { this.form.slug = this.slug; this.form.post(‘/secure/organisation’) .then(this.$route.router.go(‘/secure/organisations’)); }, sanitizeTitle: function(title) { const a = ‘àáäâèéëêìíïîòóöôùúüûñçßÿœæŕśńṕẃǵǹḿǘẍźḧ·/_,:;’ const b = ‘aaaaeeeeiiiioooouuuuncsyoarsnpwgnmuxzh-‘ const p = new RegExp(a.split(”).join(‘|’), ‘g’) let slug = “”; let titleLower = title.toLowerCase();// Change to lower case slug = titleLower.replace(/e|é|è|ẽ|ẻ|ẹ|ê|ế|ề|ễ|ể|ệ/gi, ‘e’);// Letter “e” slug = slug.replace(/a|á|à|ã|ả|ạ|ă|ắ|ằ|ẵ|ẳ|ặ|â|ấ|ầ|ẫ|ẩ|ậ/gi, ‘a’);// Letter “a” slug = slug.replace(/o|ó|ò|õ|ỏ|ọ|ô|ố|ồ|ỗ|ổ|ộ|ơ|ớ|ờ|ỡ|ở|ợ/gi, ‘o’);// Letter “o” slug = slug.replace(/u|ú|ù|ũ|ủ|ụ|ư|ứ|ừ|ữ|ử|ự/gi, ‘u’);// Letter “u” slug = slug.replace(/đ/gi, ‘d’);// Letter “d” slug = slug.replace(/s*$/g, ”);// Trim the last whitespace slug = slug.replace(/s+/g, ‘-‘);// Change whitespace to “-” slug = slug.replace(p, c => b.charAt(a.indexOf(c))) // Replace special chars slug = slug.replace(/&/g, ‘-and-‘) // Replace & with ‘and’ slug = slug.replace(/[^w-]+/g, ”) // Remove all non-word chars slug = slug.replace(/–+/g, ‘-‘) // Replace multiple – with single – return slug; } } } </script>