渲染 Vue.js 個元素

Question

我有一個問題。 在服務器中我有技術，在我的 html 文件中我想呈現它們：

<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>

在我的 Vue.js 代碼中，我接下來要做的是：

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

但在 DOM 中，我擁有所有 18 個元素。 我怎樣才能只繪制那些在頁面上可見的元素？ 謝謝！

Answer 1

如果我正確理解你想要什么。 我為技術創建計算屬性並在單擊時更改 amoutOfTechnologiesToDisplay。

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

和你的.vue 文件

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