Я использую laravel 5.4 и vue 2.0. Мне нужно вставить комментарии родительских сообщений, таких как facebook. Я хочу передать «post id» из родительского шаблона в дочерний шаблон, чтобы вставлять комментарии этого родительского сообщения.
<div class="post-section" v-for="(post,index) in posts"> <div class="media-content" v-text='post.body'></div> <button @click="getComments(post, index)" class="btn btn-link">Comments</button> <div v-if='show' class="card comment" v-for='comment in post.comments'> <span> {{comment.comment}}</span> </div> <comment-input :post="post.id" @completed='addRecentComment'></comment-input> </div> // шаблон комментария-ввода
<template> <form @submit.prevent='onSubmit'> <div class="media-comment"> <input @keyup.enter="submit" type="text" v-model='form.comment' class="form-control" placeholder="comment..."> </div> </form> </template> <script> export default { data() { return { form: new Form({comment: ''}) } }, methods: { onSubmit() { this.form .post('/comments') .then(post => this.$emit('completed', comment)); } } } </script>
заранее спасибо !!
Поскольку вы передаете опору, используя :post="post.id" объявите свойство реквизита в своем компоненте с комментариями следующим образом:
<script> export default { props: ['post'] data() { return { form: new Form({comment: ''}) } }, methods: { onSubmit() { this.form .post('/comments') .then(post => this.$emit('completed', comment)); } } } </script>
Затем вы можете использовать опору в компоненте, используя this.post
Я немного перестраиваю ваш код, чтобы его было легко понять
Передайте postId в качестве опоры с именем postId чтобы он легко распознавался
<comment-input :postId="post.id" @completed='addRecentComment'></comment-input>
Затем в вашем компоненте с комментариями объявите реквизиты, соответствующие этому
props: ['postId']
и, наконец, ваш компонент ввода комментариев
<template> <form @submit.prevent='onSubmit'> <div class="media-comment"> <input type="text" v-model='comment' class="form-control" placeholder="comment..."> </div> </form> </template> <script> export default { props: ['postId'], data() { return { comment: '' } }, methods: { onSubmit() { axios.post('api_url/' + this.postId, {comment: this.comment}) .then(response => { this.$emit('completed', this.comment); this.comment = ''; // reset back to empty }); } } } </script>
вам не требуется exta @keyup event на входе, поскольку поведение по умолчанию нажатия ввода в текстовом входе внутри формы будет отправлять вам форму
вы можете просто привязать v-model ввода к пустому комментарию в вашем параметре данных