如何循環

Question

我有一個職位的循環，每個崗位都有評論box.Initially所有評論框是隱藏的，當有人點擊「評論」按鈕，它應該顯示註釋中顯示旁邊的按鈕，唯一的輸入字段該用戶的字段爲。我無法顯示與特定帖子相關的特定評論框。我的代碼如下 -

<div class="post-section" v-for="(post,index) in posts"> 
    <div class="media-content">{{post.body}}</div> 

    <button @click="getComments(post, index)" class="btn btn-link"><i class="fa fa-comments-o"></i>{{ post.total_comments }} Comments</button> 

    <comment-input :postId="post.id"></comment-input> 
</div> 

<script> 
    export default { 
     data() { 
      return { 
       posts: [], 
      } 
     }, 

     created() { 
      Post.all(posts => this.posts = posts); 
     }, 

     methods: { 
      getComments(post, index){ 
       axios.post('getcomments', {id: post.id}) 
        .then(response => { 
         this.$set(this.posts, index, Object.assign({}, post, { comments: response.data })); 
        }); 
      }, 
     } 
    } 
</script> 

當getComments（post，index）方法執行時，我只想讓下一個註釋輸入可見。任何幫助？

在此先感謝。

Answer 1

可以稱爲toggleComments: false一個額外的屬性添加到您post對象。並用它來切換註釋部分，包括其在<div>分組註釋文本框。

這裏是fiddle

HTML

<div id="app"> 
    <div v-for="(post,index) in posts"> 
     <p>{{post.body}}</p> 
     <button @click="getComments(post, index)" class="btn btn-link">Show/Hide Comments</button> 
     <div v-if="post.toggleComments"> 
      <textarea rows="1" cols="50" placeholder="comment here ..."></textarea> 
      <div v-for='comment in post.comments'> 
       <span class="comm">Commented by:{{comment.name}}</span> 
      </div> 
     </div> 
    </div> 
</div> 

腳本

new Vue({ 
    el: '#app', 
    data: { 
     posts: [ 
      {id: 1, body: ' this is post #1'}, 
      {id: 2, body: ' this is post #2'}, 
      {id: 3, body: ' this is post #3'}, 
      {id: 3, body: ' this is post #4'}, 
      {id: 4, body: ' this is post #5'} 
     ] 
    }, 
    methods:{ 
     getComments(post, index){ 
      if(!post.comments){ 
       Vue.http.get('https://jsonplaceholder.typicode.com/users') 
       .then(response => { 
        this.$set(this.posts, index, Object.assign({}, post, { comments: response.data }, { toggleComments: false})); 
       },err => { 
        //handle errors 
       }); 
      } 
      post.toggleComments = !post.toggleComments; 
     } 
    } 
}) 

Answer 2

另一種方法，我可以分享的是：

HTML

<div class="post-section" v-for="(post,index) in posts"> 
    <div class="media-content">{{post.body}}</div> 

    <button @click="getComments(post, index)" class="btn btn-link"><i class="fa fa-comments-o"></i>{{ post.total_comments }} Comments</button> 

    <comment-input v-if="index == selectedPostIndex" :postId="post.id"></comment-input> 
</div> 

腳本

<script> 
    export default { 
     data() { 
      return { 
       posts: [], 
      } 
     }, 

     created() { 
      Post.all(posts => this.posts = posts); 
     }, 

     methods: { 
      getComments(post, index){ 
       axios.post('getcomments', {id: post.id}) 
        .then(response => { 
         this.$set(this.posts, index, Object.assign({}, post, { comments: response.data })); 
        }); 

      this.selectedPostIndex = index; 
      }, 
     } 
    } 
</script>