[英]Increasing & decreasing an array length to a input range value with Vue.js
我正在使用Vue.js构建客户端的范围过滤器。 我正在使用类型为range
的input
标签,它将过滤客户端总length
。 我已经能够将input
的值链接到 ** clients
** 数组,但它仅在减小范围时才有效,一旦我尝试增加input
的值,它就不会重新渲染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
}
}
})
您可以查看此代码示例。
这是因为在您的计算中,当您使用this.clients.length = this.clientTotal
时,您正在缩短数组,所以当您再次增加时,您已经失去了列表中的所有其他客户端。
您的过滤器应该return this.clients.slice(0, this.clientTotoal);
并且您的列表应该使用新的计算数组。
这样,您将返回一个新数组而不是破坏旧数组。
您需要以不同的方式处理此问题。 通过简单地更改长度,您实际上是从 clients 数组中删除元素。 然后,当您再次增加长度时,您只是在数组中创建空槽。
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 在另一个答案中所建议的那样。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.