laravel vue - 上传项目后axios的方法无法正常工作
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了laravel vue - 上传项目后axios的方法无法正常工作相关的知识,希望对你有一定的参考价值。
之后我上传了xampp中的网站虚拟主机axios方法停止工作。(但网站运行良好)
的httpd的虚拟主机:
NameVirtualHost *:80
<VirtualHost *:80>
DocumentRoot C:xampphtdocszbudWewpublic
ServerName localhost
<Directory C:xampphtdocszbudWewpublic>
Order allow,deny
Allow from all
</Directory>
</VirtualHost>
.ENV:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=zbudwew
DB_USERNAME=root
DB_PASSWORD=
示例axios方法:
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;
});
在我的localhost:8000地址网站和添加内容工作正常,但如果我正在尝试在我的192.168.0.199地址添加内容我收到错误:
[Vue warn]: Error in render function: "TypeError: Cannot read property 'title' of undefined"
found in
---> <Info> at C:xampphtdocszbudWew
esourcesassetsjscomponentsInfo.vue
<NewsManagement> at C:xampphtdocszbudWew
esourcesassetsjscomponentsNewsManagement.vue
<Root>
这很奇怪,因为:
axios.get('api/news').then(response => {
this.news = response.data.news;
});
工作正常。你们能给我一个如何解决这个问题的建议吗?
Data属性和axios.post看起来像这样:
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: ''
};
});
}
信息组件如下所示:
<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 i nie może być pusta.<br>');
}
if(newUser.title == ''){
$('#errorInfo').append('Tytuł jest wymagany i 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>
答案
我解决了问题!
首先,我需要在web.php文件中分离方法,如下所示:
Route::post('/api/newsAdd', 'NewsController@store');
之前:
Route::resource('api/news', 'NewsController');
很明显,斜杠存在问题:
之前:axios.post('api/newsAdd/', this.info)
之后:axios.post('api/newsAdd', this.info)
以上是关于laravel vue - 上传项目后axios的方法无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章