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

渲染 Vue.js 个元素

Render Vue.js elements

javascript

render

vue.js