使用 Vue.js 将数组长度增加和减少到输入范围值答案

【问题标题】：Increasing & decreasing an array length to a input range value with Vue.js使用 Vue.js 将数组长度增加和减少到输入范围值
【发布时间】：2020-03-13 01:26:58
【问题描述】：

我正在使用 Vue.js 构建客户端的范围过滤器。我正在使用类型为 range 的 input 标记，它将过滤客户总数 length。我已经能够将 input 的值链接到**clients** 数组，但它仅在减小范围时才有效，一旦我尝试增加 input' s 值它不会重新呈现 clients。

模板：

<div id="app">
  <input @input="filteredClients" type="range" min="0" max="10" v-model="clientTotal" />
  <ul>
    <li v-for="(client, index) in clients" :key="index">{{ client }}</li>
  </ul>
</div>

JavaScript：

const app = new Vue({
  el: "#app",
  data: {
        clientTotal: 10,
        clients: [
            'John Snow',
            'Cullen Bohannon',
            'Jamie Lannister',
            'Jane Doe',
            'Jamie Fraser',
            'John Dow',
            'Claire Fraser',
            'Frank Underwood',
            'Tony Stark',
            'Client Eastwood'
        ],
    },
    mounted() {
        this.filteredClients()
    },
    computed: {
        filteredClients() {
            this.clients.length = this.clientTotal
        }
    }
})

您可以check this code sample。

【问题讨论】：

标签： javascript arrays vue.js filter vuejs2

【解决方案1】：

您需要以不同的方式处理此问题。通过简单地更改长度，您实际上是从客户端数组中删除元素。然后当你再次增加长度时，你只是在数组中创建了空槽。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length

这里有一个建议：filteredClients 现在变成了一个新的映射数组。也无需在范围输入上的 input 事件上调用它；它是一个计算属性，因此它只会在其任何反应性依赖项 (clientTotal) 发生变化时更新。

  <input type="range" min="0" max="10" v-model="clientTotal" />
  <ul>
    <li v-for="(client, index) in filteredClients" :key="index">{{ client }}</li>
  </ul>
</div>

const app = new Vue({
  el: "#app",
  data: {
    clientTotal: 10,
    clients: [
      'John Snow',
      'Cullen Bohannon',
      'Jamie Lannister',
      'Jane Doe',
      'Jamie Fraser',
      'John Dow',
      'Claire Fraser',
      'Frank Underwood',
      'Tony Stark',
      'Client Eastwood'
    ],
  },
  computed: {
    filteredClients() {
      return this.clients.slice(0, this.clientTotal);
    }
  }
})

编辑：对于这种情况，slice 实际上比 map 更简单、更合适，正如 Neil.Work 在另一个答案中所建议的那样。

【讨论】：

【解决方案2】：

这是因为在您的计算中，当您使用 this.clients.length = this.clientTotal 时，您正在缩短数组，所以当您再次增加时，您已经失去了列表中的所有其他客户。

您的过滤器应该改为return this.clients.slice(0, this.clientTotoal);，并且您的列表应该使用新的计算数组。

这样您将返回一个新数组而不是破坏旧数组。

【讨论】：