事件发射器参数未定义为侦听器Vue js
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了事件发射器参数未定义为侦听器Vue js相关的知识,希望对你有一定的参考价值。
我对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>
我在mount中捕获了后添加的事件,然后将值传递给addpost方法(记录)。这是我收到此错误的地方。
在addpost方法当我尝试console/log(record)
它给我未定义。我认为这是错误,我不知道为什么它给我未定义。
在我的event.js文件中注意我正在导入只有这个代码module.exports = new Vue()
。
答案
在下面的代码中:
eventhub.$emit('post-added', response.body)
response.body
是undefined
。这是因为body
不是请求响应中公开的字段(此响应模式特定于axios客户端。)1
假设在发出HTTP POST请求后,服务器返回您要在客户端中处理的响应。
可以以下列方式在响应的data
字段中检索该响应数据。
eventhub.$emit('post-added', response.data)
以上是关于事件发射器参数未定义为侦听器Vue js的主要内容,如果未能解决你的问题,请参考以下文章
如何将相同的事件侦听器分配给 Vue.js 中动态创建的按钮并将对象的值作为参数传递给它?