vuej에서 추가 버튼 로드

vuej에서 추가 버튼 로드

php로부터 고객 리뷰가 있는 어레이를 받았습니다.

var comment_list = new Vue({

el: '#comment-list',

 data: {
    testimonials: JSON.parse('{!! addslashes(json_encode(array_reverse($product_info['testimonials'])))!!}'),
 },

 methods: {
    colorAvatar: function(letter) {
        return 'avatar-' + letter.toLowerCase();
    },
    starClass: function(star) {
        return 'star-' + star;
    }
  }
});

더 많이 로드하여 10개씩 댓글을 표시하는 버튼을 만들고 싶습니다.

어떻게 해야 하죠?

API를 사용하지 않고 첫 번째 로드 시 모든 코멘트를 로드합니다.

new Vue({
  el: ".vue",
  data() {
    return {
      reviews: [{name: 'Derek', description: 'Some comment'}, {name: 'Joe', description: 'Some comment'},{name: 'Mike', description: 'Some comment'}, {name: 'Ron', description: 'Some comment'},{name: 'Dii', description: 'Some comment'}, {name: 'Lonnie', description: 'Some comment'},{name: 'Paul', description: 'Some comment'}, {name: 'Mike', description: 'Some comment'},{name: 'Jody', description: 'Some comment'}, {name: 'Ryn', description: 'Some comment'},{name: 'Jord', description: 'Some comment'}, {name: 'Milly', description: 'Some comment'},{name: 'Judy', description: 'Some comment'}, {name: 'Vanilly', description: 'Some comment'},{name: 'Nolan', description: 'Some comment'}, {name: 'Pino', description: 'Some comment'},{name: 'Ryne', description: 'Some comment'}, {name: 'Scott', description: 'Some comment'},{name: 'Son', description: 'Some comment'}, {name: 'Bann', description: 'Some comment'},],
      commentsToShow: 2
    };
  }  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div class="container vue">
  <div v-if="commentIndex <= commentsToShow" v-for="commentIndex in commentsToShow"> 
    <div>{{reviews[commentIndex - 1].name}} says:</div>
    <i><div>{{reviews[commentIndex - 1].description}}</div></i>
    <hr />
  </div>
  <button @click="commentsToShow += 2">show more reviews</button>
</div>

도움이 됐으면 좋겠네요!

올바른 방법은 AJAX를 사용하는 것입니다.버튼을 클릭할 때마다 요청을 전송합니다.

웹 서비스 엔드포인트를 생성해야 합니다(예:/api/comments이 웹 서비스의 코드를 송신해, 코멘트를 JSON으로서 송신합니다.매개 변수를 추가할 수도 있습니다.?page=110으로 나누면 1페이지가 첫 번째 10페이지, 2페이지가 두 번째 10페이지 등입니다.

그런 다음 클릭 시 이벤트 핸들러를 "load more" 버튼에 할당해야 합니다.이 버튼은 요청을 해당 웹 서비스로 전송합니다.여기에서는, 다음과 같이 악리를 사용할 수 있습니다.

axios.get('/api/comments').then(res => {
    /* returned data will be in res.data */
    /* it should contain the comments array you sent in the web service */
    this.testimonials = res.data;
});

언급URL : https://stackoverflow.com/questions/53246481/load-more-button-in-vuejs