laravel vue - 上传项目后axios的方法无法正常工作

Question

之后我在 xampp 的 virtualHost axios 方法中上传站点停止工作。（但站点运行良好）

httpd-vhosts：

NameVirtualHost *:80
<VirtualHost *:80>
    DocumentRoot C:\xampp\htdocs\zbudWew\public
    ServerName localhost
    <Directory C:\xampp\htdocs\zbudWew\public>
        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:\xampp\htdocs\zbudWew\resources\assets\js\components\Info.vue
       <NewsManagement> at C:\xampp\htdocs\zbudWew\resources\assets\js\components\NewsManagement.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: ''
                };
            });
        }

Info 组件如下所示：

<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>

Answer 1

我解决了问题！

首先我需要像这样在我的 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)