Javascript 增加&；使用Vue.js将数组长度减少到输入范围值

我正在使用构建客户范围过滤器。我正在使用类型为

范围的
输入
标记，它将过滤客户端的总长度
。我已经能够将
输入的值链接到**
客户端
**数组，但它只在减小范围时起作用，一旦我尝试增加
输入
的值，它就不会重新启动
客户端

模板：

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

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

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

你的过滤器应该返回this.clients.slice（0，this.clienttoal）和您的列表应使用新的计算数组

这样，您将返回一个新阵列，而不是销毁旧阵列
 您需要以不同的方式处理此问题。通过简单地更改长度，实际上就是从客户机数组中删除元素。然后，当您再次增加长度时，您只是在阵列中创建空插槽


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

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

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