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的方法无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Vue 和 Laravel 中使用 axios 上传图像文件和数据对象?

vue中element-ui 使用axios上传文件 组件

vue中element-ui 使用axios上传文件 组件

vue中element-ui 使用axios上传文件 组件

vue中element-ui 使用axios上传文件 组件

不允许 axios 发布 405 | Laravel + vue.js