Question

我正在尝试使用Vuejs的vue-truncate-collapsed属性添加“更多阅读”和“更少阅读”按钮。一个工作人员可以拥有多种服务。这样的事情。服务存储为数组。

<li v-for="item in worker.service_names">
 {{ item}}
</li>

这很好用。但是现在我要做的是显示默认的5个值（不确定如何添加5个值的长度），并且如果一个工作人员拥有5个以上的服务，则会出现“读取更多”按钮。我无法在数组上实现此功能。请帮助我找出问题所在。我是Vuejs的新手。

<truncate
 action-class="action"
 clamp="..."
 :length="5"
 less="read less"
 :text="<li>worker.service_names</li>"
 type="html"
 >
</truncate>

Answer 1

您可以遍历计算出的列表。如果它是一个简短列表，则计算值将返回一个简短列表，否则返回完整列表。

var vm = new Vue({
  el: '#app',
  data: {
    workers: ['A','B','C','D','E','F','G','H'],
    showNum: 4,
    short: true
  },
  computed: {
    visibleWorkers(){
      if(this.short){
        return this.workers.slice(0,this.showNum)
      }else{
        return this.workers
      }
    }
  },
  methods: {
    showMore(){
      this.short=!this.short;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>

<div id="app">
  <div>
  <ol>
    <li v-for="item in visibleWorkers">
      {{item}}
    </li>
  </ol>
<button @click="showMore">{{short?'show more':'hide'}}</button>
</div>
</div>

数组上的Vue JS trucate属性

1 个答案: