database - laravel vue - axios's methods not working correctly after upload project -
after uploaded site in xampp's virtualhost axios methods stopped working.(but site working well)
httpd-vhosts:
namevirtualhost *:80 <virtualhost *:80> documentroot c:\xampp\htdocs\zbudwew\public servername localhost <directory c:\xampp\htdocs\zbudwew\public> order allow,deny allow </directory> </virtualhost>
.env:
db_connection=mysql db_host=127.0.0.1 db_port=3306 db_database=zbudwew db_username=root db_password=
example axios method:
axios.post('api/news/', this.info).then(response => { this.news.unshift(response.data.info); this.info = {title: '', body:''}; console.log(response.data); }, response => { this.errors = response.data; });
on localhost:8000 address site , adding content working good, if trying add content on 192.168.0.199 address getting errors:
[vue warn]: error in render function: "typeerror: cannot read property 'title' of undefined" found in ---> <info> @ c:\xampp\htdocs\zbudwew\resources\assets\js\components\info.vue <newsmanagement> @ c:\xampp\htdocs\zbudwew\resources\assets\js\components\newsmanagement.vue <root>
which werid, because:
axios.get('api/news').then(response => { this.news = response.data.news; });
is working correctly. guys give me advice how solve this?
data property , axios.post looks this:
data() { return { show: false, news: [], errors: [], info: { title: '', body: '', } } }, components: { info }, created() { this.fetchnews(); }, methods: { fetchnews() { axios.get('api/news').then(response => { this.news = response.data.news; }); }, createinfo() { axios.post('api/news/', this.info).then(response => { this.news.unshift(response.data.info); this.info = { title: '', body: '' }; }); }
info component looks this:
<template> <tr> <td> <span id="errorinfo"></span> <input type="text" class="form-control" v-model="editform.title" v-if="edit" placeholder="tytuł"> <span v-else>{{ info.title }}</span> <br> <div v-if="edit"> <textarea id="editorinfo" name="editorinfo" type="text" class="form-control" v-model="editform.body" ></textarea> </div> <span v-else></span> </td> <td align="right"> <button v-on:click="editinfo" type="button" class="btn btn-info" v-if="!edit" >edytuj</button> <button v-on:click="$emit('delete-info', info)" type="button" class="btn btn-danger" v-if="!edit">usuń</button> <button v-on:click="updateinfo(info, editform)" type="button" class="btn btn-primary" v-if="edit" >gotowe</button> <button v-on:click="canceledit" type="button" class="btn btn-default" v-if="edit" >anuluj</button> </td> </tr> </template> <script> export default { props: ['info'], data(){ return { edit: false, editform:{ title: '', body:'' } } }, methods: { editinfo(){ this.edit = true; this.editform.title = this.info.title; this.editform.body = this.info.body; window.settimeout(function(){ try{ ckeditor.replace('editorinfo'); }catch(e){} }, 1); $('#errorinfo').html(''); }, canceledit(){ this.edit = false; this.editform.title = ''; this.editform.body = ''; $('#errorinfo').html(''); }, updateinfo(olduser, newuser){ newuser.body = ckeditor.instances.editorinfo.getdata(); $('#errorinfo').html(''); if (newuser.body == '' || newuser.title == ''){ if(newuser.body == ''){ $('#errorinfo').append('treść jest wymagana nie może być pusta.<br>'); } if(newuser.title == ''){ $('#errorinfo').append('tytuł jest wymagany nie może być pusty.'); } } else { axios.patch('/api/news/' + olduser.id, newuser).then(response=> { this.$emit('update-info'); this.canceledit(); console.log(response.data); }); } } } } </script> <style> #errorinfo { color: #660000; } </style>
i solved problem!
firstly needed separate methods in web.php file this:
route::post('/api/newsadd', 'newscontroller@store');
that before:
route::resource('api/news', 'newscontroller');
sedcondly there problem slashes:
before: axios.post('api/newsadd/', this.info)
after: axios.post('api/newsadd', this.info)
Comments
Post a Comment