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?
javascript vue.js vuejs2
add a comment |
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?
javascript vue.js vuejs2
Looks like you're going to have to implement an API on the back end, then use a library likeaxios
orfetch
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
add a comment |
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?
javascript vue.js vuejs2
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?
javascript vue.js vuejs2
javascript vue.js vuejs2
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 likeaxios
orfetch
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
add a comment |
Looks like you're going to have to implement an API on the back end, then use a library likeaxios
orfetch
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
add a comment |
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!
1
amazing answer man
– Antonio Morales
Nov 11 at 8:41
add a comment |
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;
});
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
andvisible_testimonials
, and each button click move next ten from testimonials to the visible_testimonials
– Haitham Athamneh
Nov 11 at 7:50
add a comment |
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!
1
amazing answer man
– Antonio Morales
Nov 11 at 8:41
add a comment |
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!
1
amazing answer man
– Antonio Morales
Nov 11 at 8:41
add a comment |
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!
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>
answered Nov 11 at 7:24
Derek Pollard
3,77422239
3,77422239
1
amazing answer man
– Antonio Morales
Nov 11 at 8:41
add a comment |
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
add a comment |
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;
});
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
andvisible_testimonials
, and each button click move next ten from testimonials to the visible_testimonials
– Haitham Athamneh
Nov 11 at 7:50
add a comment |
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;
});
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
andvisible_testimonials
, and each button click move next ten from testimonials to the visible_testimonials
– Haitham Athamneh
Nov 11 at 7:50
add a comment |
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;
});
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;
});
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
andvisible_testimonials
, and each button click move next ten from testimonials to the visible_testimonials
– Haitham Athamneh
Nov 11 at 7:50
add a comment |
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
andvisible_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
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
Looks like you're going to have to implement an API on the back end, then use a library like
axios
orfetch
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