我正在使用 Vue.js 构建客户的范围过滤器强>。我正在使用 input
类型为 range
的标签 这将过滤客户总数 length
强>。我已经能够链接 input
对** clients
的值(value)** array ,但它仅在减小范围时有效,一旦我尝试增加 input
的值(value),它不会重新呈现 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 .
最佳答案
您需要以不同的方式处理此问题。通过简单地更改长度,您实际上是在从 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 在另一个答案中所建议的那样。
关于javascript - 使用 Vue.js 将数组长度增加和减少到输入范围值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58901649/