javascript - 使用 Vue.js 将数组长度增加和减少到输入范围值
问题描述
我正在使用Vue.js构建客户端的范围过滤器。我正在使用类型为过滤客户总数的input
标签。我已经能够将' 的值链接到 ** ** 数组,但它仅在减小范围时才有效,一旦我尝试增加' 的值,它就不会重新渲染.range
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
}
}
})
您可以查看此代码示例。
解决方案
您需要以不同的方式处理此问题。通过简单地更改长度,您实际上是从 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 在另一个答案中所建议的那样。
推荐阅读
- html - Angular CLI 按钮(单击)不调用方法
- java - 首次使用 vscode 时的 Java 编译问题
- javascript - 开放银行 api 与 ASP.NET MVC 的集成
- azure-devops - 在 Azure Devops 中部署发布管道时出错
- ios - 如何在ffmpeg中添加具有相同视频纵横比的视频开头的介绍图像?
- robotframework - 如何在第一次循环迭代后获取更改的内容(字符串)以用于 Robot 框架的下一次迭代
- python - 按 id1 和 id2 分组并使用另一个数据框和日期应用函数
- docker - 在 docker-compose.yml 中使用自定义命令、管道和嵌套引号
- editor - Visual Studio .NET 2003:为 MSDN 按 F1
- javascript - discord.js Javascript字符串操作