CODEWITHSUNDEEP
javascriptvue.js
user14973366
user14973366

Reputation:

Limit shown data in Vue

I'm trying to create a button in Vue that limits the item's view coming from an API. So, if I have an array of 10 questions it should show me 3 and when I click on the showmore button, it will show another 3, and so on... but it's not even showing me the questionTitle.

Any help?

<template>
  <ul 
    class="container-question" 
    v-for="(question, index) in filteredList"
    :key="index" 
  >
    <div>
      <div  v-if="commentIndex < question.length">
        <div v-for="(commentIndex,index) in commentsToShow" :key="index">
          {{ question[commentIndex].questionTitle }}
        </div>
      </div>
    </div>
    <div v-if="commentsToShow < this.questions.length || this.questions.length > commentsToShow">
      <button @click="commentsToShow += 3">show more reviews</button>
    </div>
</template>

<script>
  import questionService from "../services/questionService";
  export default {
    data() {
      return {
        questions: [],
        commentsToShow: 3,
        totalComments: 0,
      }
    }
    computed: {
      filteredList() { // used in search bar
        return this.questions.filter(question => {
          return question.questionTitle.includes(this.search) ||
            question.owner.username.includes(this.search) ||
            question.categories.some(category =>
              category.category_name === (this.search)
            )
        })
      }
    },
    mounted: function() {
      questionService.getAllQuestions().then((response) => { // API URl for questions
        this.questions = response.data.response;
        this.totalComments = this.questions.length;
        console.log(this.questions.length, "length")
      });
    },
  };

Upvotes: 1

Views: 1350

Answers (2)

Dan Knights
Dan Knights

Reputation: 8368

It's because you're attempting to access commentIndex before it's been defined:

<!-- Used here -->
<div  v-if="commentIndex < question.length">
  <!-- Defined here -->
  <div v-for="(commentIndex,index) in commentsToShow" :key="index">

You could move the v-if onto the same element:

<div 
  v-for="(commentIndex,index) in commentsToShow" 
  :key="index" 
  v-if="commentIndex < question.length"
>

But this is not recommended.

What I'd suggest is refactoring your code to slice the array based off the commentsToShow data property:

<template>
  <ul 
    class="container-question" 
    v-for="(question, index) in filteredList"
    :key="index" 
  >
    <div>
      <div>
        <div v-for="(comment, index) in question.slice(0, commentsToShow)" :key="index">
          {{ comment }}
        </div>
      </div>
    </div>
    <div v-if="commentsToShow < this.questions.length || this.questions.length > commentsToShow">
      <button @click="commentsToShow += 3">show more reviews</button>
    </div>
</template>

<script>
  import questionService from "../services/questionService";
  export default {
    data() {
      return {
        questions: [],
        commentsToShow: 3,
        totalComments: 0,
      }
    }
    computed: {
      filteredList() { // used in search bar
        return this.questions.filter(question => {
          return question.questionTitle.includes(this.search) ||
            question.owner.username.includes(this.search) ||
            question.categories.some(category =>
              category.category_name === (this.search)
            )
        })
      }
    },
    mounted: function() {
      questionService.getAllQuestions().then((response) => { // API URl for questions
        this.questions = response.data.response;
        this.totalComments = this.questions.length;
        console.log(this.questions.length, "length")
      });
    },
  };
</script>

Upvotes: 1

devil-0-per
devil-0-per

Reputation: 185

Try enclosing the content of the template into a div. Also there is a missing </UL> tag

<template>
  <div>
    <div 
      class="container-question" 
      v-for="(question, index) in filteredList"
      :key="index" 
    >
      <div>
        <div  v-if="commentIndex < question.length">
          <div v-for="(commentIndex,index) in commentsToShow" :key="index">
            {{ question[commentIndex].questionTitle }}
          </div>
        </div>
      </div>
      <div v-if="commentsToShow < this.questions.length || this.questions.length > commentsToShow">
        <button @click="commentsToShow += 3">show more reviews</button>
      </div>
    </div>
  </div>
</template>

Upvotes: 0

Related Questions