Render Vue.js elements

Question

I have one problem. In server i have technologies, and in my html file i want to render them:

<div
  v-for="(technology, index) in technologies"
  :key="technology.id"
>
  technology-card
   v-if="index < currentlyTechnologies"
   :technology="technology"
  />
</div>
<button
  type="button"
  @click="onToggleButtonClick"
>
  {{ toggleButtonText }}
</button>

In my Vue.js code i do next:

data () {
    return {
      currentlyTechnologies: 6
    }
  },
  computed: {
    toggleButtonText (): string {
      return this.currentlyTechnologies === this.technologies.length ? 'Show less' : 'Show more'
    }
  },
  methods: {
    onToggleButtonClick () {
      const limitTechnologies = 6

      this.currentlyTechnologies = this.currentlyTechnologies === limitTechnologies ? this.technologies.length : limitTechnologies
    }
  }

But in DOM i have all 18 element. how can I draw only those elements that will be visible on the page? Thank you!

Anton Platon · Accepted Answer · 2020-07-29 11:19:27Z

1

If i properly understood what you want. I make computed property for technologies and change amoutOfTechnologiesToDisplay on click.

<div
  v-for="(technology, index) in technologies"
  :key="technology.id"
>
  <technology-card
   :technology="technology"
  />
</div>
<button
  type="button"
  @click="onToggleButtonClick"
>
  {{ toggleButtonText }}
</button>

and your .vue file

data () {
    return {
      amoutOfTechnologiesToDisplay: 6,
      technologiesFromServer: [
        // arr of obj {}, {}, {}....
      ]
    }
  },
  computed: {
    toggleButtonText (): string {
      return this.currentlyTechnologies === this.technologies.length ? 'Show less' : 'Show more'
    },
    technologies(): array {
      return technologiesFromServer.slice(0, this.amoutOfTechnologiesToDisplay);
      
    }

  },
  methods: {
    onToggleButtonClick (): void {
      const limitTechnologies = 6;

      this.amoutOfTechnologiesToDisplay = this.amoutOfTechnologiesToDisplay < this.technologiesFromServer.length ? this.technologiesFromServer.length : limitTechonogies;
    }
  }

answered Jul 29, 2020 at 11:19

Anton Platon

985 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anton Platon Over a year ago

Yeah) Please, mark my answer as correct) so you can close the question.

Collectives™ on Stack Overflow

Render Vue.js elements

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related