Question

我是Vue.js的新手。我的Laravel项目中有3个简单的组件，一个PostForm用来发布推文，其他的则可以在时间轴上显示帖子。我正在使用Axios发布和从后端获取数据。当我发布推文时，它会保存在数据库中，但是当我按事件传递数据时，会出现此错误。

PostForm组件：

<template>  
    <form action="#" class="form-vertical" @submit.prevent="post">
        <div class="form-group">
            <textarea name="body" id="" cols="30" rows="3" class="form-control" placeholder="Write something likable" v-model="body"></textarea>  
        </div>
        <button type="submit" class="btn btn-primary">Post it!</button>
    </form>
</template>

<script>
import eventhub from '../event'
export default{
    data(){
        return{
            body:null
        }
    },
    methods:{
        post(){

            axios.post('posts',{
                body:this.body
            }).then((response)=>{

            eventhub.$emit('post-added', response.body)
                this.body=null
            })
        }
    }
}
</script>

当我console.log(response.data)时，我一切都很好...

...然后将事件（后添加）发送到时间轴组件。

时间轴组件：

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Timeline</div>
                    <div class="card-body">
                        <postform></postform>
                        <hr>
                        <post v-for="post in posts" :post="post" :key="post.index"></post>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import eventhub from '../event'
import Post from './Post.vue' 
import postform from './PostForm.vue'

export default {
    data(){
        return{
            posts:[]
        }
    } ,
    components:{
        Post,postform
    }
    ,
    methods:{
        addpost(record){

        }
    },
    mounted() {
        eventhub.$on('post-added',this.addpost)
        axios.get('/posts').then((response)=>{
            this.posts=response.data
        })
    }
}
</script>

我正在挂载中捕获该添加后的事件，然后将该值传递给addpost方法（记录）。这是我收到此错误的地方。

在addpost方法中，当我尝试console/log(record)时，它的含义是不确定的。我认为这是错误，我不知道为什么它给我未定义。

我要导入的event.js文件中的注释仅具有此代码module.exports = new Vue()。

Answer 1

在以下代码中：

eventhub.$emit('post-added', response.body)

response.body是undefined。这是因为body不是请求响应中公开的字段（此响应模式特定于 axios 客户端。）¹

假设在发出HTTP POST请求之后，服务器返回了您要在客户端中处理的响应。

可以通过以下方式在响应的data字段中检索响应数据。

eventhub.$emit('post-added', response.data)

侦听器Vue js

1 个答案: