Load more button in vuejs











up vote
2
down vote

favorite












I receive from php an array with customer reviews:



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;
}
}
});


I want to create a button to load more and show comments ten by ten.



How can I do it?



enter image description here










share|improve this question
























  • Looks like you're going to have to implement an API on the back end, then use a library like axios or fetch to grab the updates from said API based on the last comment you fetched
    – Derek Pollard
    Nov 11 at 7:00










  • I know, but I don't have a comment api, it's just an array in php. Can you think of anything?
    – Antonio Morales
    Nov 11 at 7:08










  • Ajax really is the most efficient way to do this. Otherwise, you can load all of the comments on the initial page load, then only display the first 3, then when they click a button, display 3 more and so on
    – Derek Pollard
    Nov 11 at 7:10















up vote
2
down vote

favorite












I receive from php an array with customer reviews:



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;
}
}
});


I want to create a button to load more and show comments ten by ten.



How can I do it?



enter image description here










share|improve this question
























  • Looks like you're going to have to implement an API on the back end, then use a library like axios or fetch to grab the updates from said API based on the last comment you fetched
    – Derek Pollard
    Nov 11 at 7:00










  • I know, but I don't have a comment api, it's just an array in php. Can you think of anything?
    – Antonio Morales
    Nov 11 at 7:08










  • Ajax really is the most efficient way to do this. Otherwise, you can load all of the comments on the initial page load, then only display the first 3, then when they click a button, display 3 more and so on
    – Derek Pollard
    Nov 11 at 7:10













up vote
2
down vote

favorite









up vote
2
down vote

favorite











I receive from php an array with customer reviews:



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;
}
}
});


I want to create a button to load more and show comments ten by ten.



How can I do it?



enter image description here










share|improve this question















I receive from php an array with customer reviews:



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;
}
}
});


I want to create a button to load more and show comments ten by ten.



How can I do it?



enter image description here







javascript vue.js vuejs2






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 11 at 6:57









Aravinda Meewalaarachchi

509311




509311










asked Nov 11 at 6:48









Antonio Morales

5321821




5321821












  • Looks like you're going to have to implement an API on the back end, then use a library like axios or fetch to grab the updates from said API based on the last comment you fetched
    – Derek Pollard
    Nov 11 at 7:00










  • I know, but I don't have a comment api, it's just an array in php. Can you think of anything?
    – Antonio Morales
    Nov 11 at 7:08










  • Ajax really is the most efficient way to do this. Otherwise, you can load all of the comments on the initial page load, then only display the first 3, then when they click a button, display 3 more and so on
    – Derek Pollard
    Nov 11 at 7:10


















  • Looks like you're going to have to implement an API on the back end, then use a library like axios or fetch to grab the updates from said API based on the last comment you fetched
    – Derek Pollard
    Nov 11 at 7:00










  • I know, but I don't have a comment api, it's just an array in php. Can you think of anything?
    – Antonio Morales
    Nov 11 at 7:08










  • Ajax really is the most efficient way to do this. Otherwise, you can load all of the comments on the initial page load, then only display the first 3, then when they click a button, display 3 more and so on
    – Derek Pollard
    Nov 11 at 7:10
















Looks like you're going to have to implement an API on the back end, then use a library like axios or fetch to grab the updates from said API based on the last comment you fetched
– Derek Pollard
Nov 11 at 7:00




Looks like you're going to have to implement an API on the back end, then use a library like axios or fetch to grab the updates from said API based on the last comment you fetched
– Derek Pollard
Nov 11 at 7:00












I know, but I don't have a comment api, it's just an array in php. Can you think of anything?
– Antonio Morales
Nov 11 at 7:08




I know, but I don't have a comment api, it's just an array in php. Can you think of anything?
– Antonio Morales
Nov 11 at 7:08












Ajax really is the most efficient way to do this. Otherwise, you can load all of the comments on the initial page load, then only display the first 3, then when they click a button, display 3 more and so on
– Derek Pollard
Nov 11 at 7:10




Ajax really is the most efficient way to do this. Otherwise, you can load all of the comments on the initial page load, then only display the first 3, then when they click a button, display 3 more and so on
– Derek Pollard
Nov 11 at 7:10












2 Answers
2






active

oldest

votes

















up vote
2
down vote



accepted










Without an API, and loading all the comments on the initial load:






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 < reviews.length" v-for="commentIndex in commentsToShow">
<div>{{reviews[commentIndex].name}} says:</div>
<i><div>{{reviews[commentIndex].description}}</div></i>
<hr />
</div>
<button @click="commentsToShow += 2">show more reviews</button>
</div>





I hope this helps!






share|improve this answer

















  • 1




    amazing answer man
    – Antonio Morales
    Nov 11 at 8:41


















up vote
0
down vote













The correct way is using AJAX, and send a request each button click.



You need to create an web service endpoint (for example /api/comments) and send the code of this web service send you the comments as JSON.
You may also add parameter ?page=1 to be able to divide it to tens, page 1 is the first ten, page 2 is the second ten and so on.



Then, you need to assign on click event handler to the "load more" button, that should sends the request to that web service.
You can use axios here like this:



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;
});





share|improve this answer





















  • I know, but I don't have a comment api, it's just an array in php. Can you think of anything?
    – Antonio Morales
    Nov 11 at 7:08










  • You may use two data variables, testimonials and visible_testimonials, and each button click move next ten from testimonials to the visible_testimonials
    – Haitham Athamneh
    Nov 11 at 7:50











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














 

draft saved


draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53246481%2fload-more-button-in-vuejs%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
2
down vote



accepted










Without an API, and loading all the comments on the initial load:






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 < reviews.length" v-for="commentIndex in commentsToShow">
<div>{{reviews[commentIndex].name}} says:</div>
<i><div>{{reviews[commentIndex].description}}</div></i>
<hr />
</div>
<button @click="commentsToShow += 2">show more reviews</button>
</div>





I hope this helps!






share|improve this answer

















  • 1




    amazing answer man
    – Antonio Morales
    Nov 11 at 8:41















up vote
2
down vote



accepted










Without an API, and loading all the comments on the initial load:






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 < reviews.length" v-for="commentIndex in commentsToShow">
<div>{{reviews[commentIndex].name}} says:</div>
<i><div>{{reviews[commentIndex].description}}</div></i>
<hr />
</div>
<button @click="commentsToShow += 2">show more reviews</button>
</div>





I hope this helps!






share|improve this answer

















  • 1




    amazing answer man
    – Antonio Morales
    Nov 11 at 8:41













up vote
2
down vote



accepted







up vote
2
down vote



accepted






Without an API, and loading all the comments on the initial load:






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 < reviews.length" v-for="commentIndex in commentsToShow">
<div>{{reviews[commentIndex].name}} says:</div>
<i><div>{{reviews[commentIndex].description}}</div></i>
<hr />
</div>
<button @click="commentsToShow += 2">show more reviews</button>
</div>





I hope this helps!






share|improve this answer












Without an API, and loading all the comments on the initial load:






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 < reviews.length" v-for="commentIndex in commentsToShow">
<div>{{reviews[commentIndex].name}} says:</div>
<i><div>{{reviews[commentIndex].description}}</div></i>
<hr />
</div>
<button @click="commentsToShow += 2">show more reviews</button>
</div>





I hope this helps!






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 < reviews.length" v-for="commentIndex in commentsToShow">
<div>{{reviews[commentIndex].name}} says:</div>
<i><div>{{reviews[commentIndex].description}}</div></i>
<hr />
</div>
<button @click="commentsToShow += 2">show more reviews</button>
</div>





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 < reviews.length" v-for="commentIndex in commentsToShow">
<div>{{reviews[commentIndex].name}} says:</div>
<i><div>{{reviews[commentIndex].description}}</div></i>
<hr />
</div>
<button @click="commentsToShow += 2">show more reviews</button>
</div>






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 11 at 7:24









Derek Pollard

3,77422239




3,77422239








  • 1




    amazing answer man
    – Antonio Morales
    Nov 11 at 8:41














  • 1




    amazing answer man
    – Antonio Morales
    Nov 11 at 8:41








1




1




amazing answer man
– Antonio Morales
Nov 11 at 8:41




amazing answer man
– Antonio Morales
Nov 11 at 8:41












up vote
0
down vote













The correct way is using AJAX, and send a request each button click.



You need to create an web service endpoint (for example /api/comments) and send the code of this web service send you the comments as JSON.
You may also add parameter ?page=1 to be able to divide it to tens, page 1 is the first ten, page 2 is the second ten and so on.



Then, you need to assign on click event handler to the "load more" button, that should sends the request to that web service.
You can use axios here like this:



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;
});





share|improve this answer





















  • I know, but I don't have a comment api, it's just an array in php. Can you think of anything?
    – Antonio Morales
    Nov 11 at 7:08










  • You may use two data variables, testimonials and visible_testimonials, and each button click move next ten from testimonials to the visible_testimonials
    – Haitham Athamneh
    Nov 11 at 7:50















up vote
0
down vote













The correct way is using AJAX, and send a request each button click.



You need to create an web service endpoint (for example /api/comments) and send the code of this web service send you the comments as JSON.
You may also add parameter ?page=1 to be able to divide it to tens, page 1 is the first ten, page 2 is the second ten and so on.



Then, you need to assign on click event handler to the "load more" button, that should sends the request to that web service.
You can use axios here like this:



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;
});





share|improve this answer





















  • I know, but I don't have a comment api, it's just an array in php. Can you think of anything?
    – Antonio Morales
    Nov 11 at 7:08










  • You may use two data variables, testimonials and visible_testimonials, and each button click move next ten from testimonials to the visible_testimonials
    – Haitham Athamneh
    Nov 11 at 7:50













up vote
0
down vote










up vote
0
down vote









The correct way is using AJAX, and send a request each button click.



You need to create an web service endpoint (for example /api/comments) and send the code of this web service send you the comments as JSON.
You may also add parameter ?page=1 to be able to divide it to tens, page 1 is the first ten, page 2 is the second ten and so on.



Then, you need to assign on click event handler to the "load more" button, that should sends the request to that web service.
You can use axios here like this:



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;
});





share|improve this answer












The correct way is using AJAX, and send a request each button click.



You need to create an web service endpoint (for example /api/comments) and send the code of this web service send you the comments as JSON.
You may also add parameter ?page=1 to be able to divide it to tens, page 1 is the first ten, page 2 is the second ten and so on.



Then, you need to assign on click event handler to the "load more" button, that should sends the request to that web service.
You can use axios here like this:



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;
});






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 11 at 7:05









Haitham Athamneh

814




814












  • I know, but I don't have a comment api, it's just an array in php. Can you think of anything?
    – Antonio Morales
    Nov 11 at 7:08










  • You may use two data variables, testimonials and visible_testimonials, and each button click move next ten from testimonials to the visible_testimonials
    – Haitham Athamneh
    Nov 11 at 7:50


















  • I know, but I don't have a comment api, it's just an array in php. Can you think of anything?
    – Antonio Morales
    Nov 11 at 7:08










  • You may use two data variables, testimonials and visible_testimonials, and each button click move next ten from testimonials to the visible_testimonials
    – Haitham Athamneh
    Nov 11 at 7:50
















I know, but I don't have a comment api, it's just an array in php. Can you think of anything?
– Antonio Morales
Nov 11 at 7:08




I know, but I don't have a comment api, it's just an array in php. Can you think of anything?
– Antonio Morales
Nov 11 at 7:08












You may use two data variables, testimonials and visible_testimonials, and each button click move next ten from testimonials to the visible_testimonials
– Haitham Athamneh
Nov 11 at 7:50




You may use two data variables, testimonials and visible_testimonials, and each button click move next ten from testimonials to the visible_testimonials
– Haitham Athamneh
Nov 11 at 7:50


















 

draft saved


draft discarded



















































 


draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53246481%2fload-more-button-in-vuejs%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Bressuire

Vorschmack

Quarantine