Я очень новичок в Vue.js.У меня есть 3 простых компонента в моем проекте Laravel, один 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().