插入父母的評論vue js

Question

我正在使用laravel 5.4和vue 2.0。我需要插入像Facebook一樣的父母帖子的評論。 我想從父母到孩子的模板傳遞'職位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>&nbsp; {{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> 

在此先感謝！

Answer 1

既然你逝去的使用: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> 

然後聲明道具PROPERT這樣

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事件輸入，因爲在表單內的文本輸入中按下輸入的默認行爲將提交您的表格

• 你可以綁定輸入的v-model空評論在您的數據選項