javascript - Vue js: load more data button not working properly

Question

In my Vue.js code below I'm trying to add a Show More button to my data coming from API so initially it should show 10 data and whenever clicked load more 10 and so on. I tried answer from:

Load more button in vuejs

but it's not working since I'm looping over an array it gives me the error below can't read property of question title. Is there a way to do it?

<div class="search-askbutton">
            <b-row>
              <div class="search-wrapper">
                <input
                  type="text"
                  v-model="search"
                  placeholder="Search something..."
                  class="fas fa-search"
                />
                </div>

<div class="container vue">
<div v-for="commentIndex in commentsToShow"> 
    <div v-if="commentIndex <= commentsToShow">
        <ul
           class="container-question"
           v-for="(question, index) in filteredList"
           :key="index"
        >
            <div>{{question[commentIndex - 1].questionTitle}} says:</div>
            <hr />
        </ul>
    </div>
</div>
   <button @click="commentsToShow += 10">show more</button>
</div>

<script>
export default {
    data() {
        return { commentsToShow: 10,
        search: '',
        questions: [],}
    },
     computed: {

    filteredList() {
      return this.questions.filter((question) => {
        return (
          question.questionTitle
            .toLowerCase()
            .includes(this.search.toLowerCase()) ||
          question.owner.username
            .toLowerCase()
            .includes(this.search.toLowerCase()) ||
          question.questionTitle
            .toUpperCase()
            .includes(this.search.toUpperCase()) ||
          question.owner.username
            .toUpperCase()
            .includes(this.search.toUpperCase())
        );
      });
    },
  },
    mounted: function() {
    questionService.getAllQuestions().then((response) => {
      this.questions = response.data.response;}
}
</script>

question from:https://stackoverflow.com/questions/65870100/vue-js-load-more-data-button-not-working-properly

Answer 1

The problem is your subtraction

<div>{{question[commentIndex - 1].questionTitle}} says:</div>

If commentIndex = 0 then you'll be saying 0-1 = -1 therefore it will not find the -1 index.

You could replace this line

<div v-if="commentIndex <= commentsToShow">

So that it can run only if the index is greater than 0

<div v-if="commentIndex > 0">