我使用组件QSlider对多个滑块求和,同时给出用户必须达到的最大点数.例如:在一个滑块上,我放两个,另一个放三个,总和不能超过4.我已经成功地阻止了第二个滑块的数量为2.问题是,尽管第二个滑块的数量是2,但在视觉上我可以继续增加我的滑块的值.

有没有人知道如何解决这个问题?

先谢谢你.

代码在Stackblitz上可用

推荐答案

To restrict the length of slider, you must set an inner-max value for it.
In your case, it should be:

 <q-slider
            v-model="item.value"
            :min="0"
            :max="10"
            :inner-max="points + item.value"
            @update:model-value="calculatePoints(item.title)"
 />

101:https://quasar.dev/vue-components/slider#with-inner-min-max.

Javascript相关问答推荐

从PWA中的内部存储读取文件

如何解决CORS政策的问题

如何从JSON数组添加Google Maps标记—或者如何为数组添加参数到标记构造器

togglePopover()不打开但不关闭原生HTML popover'

无法检测卡片重叠状态的问题

如何在ASP.NET中使用Google Charts API JavaScript将条形图标签显示为绝对值而不是负值

使用原型判断对象是否为类的实例

覆盖TypeScrip中的Lit-Element子类的属性类型

类构造函数不能在没有用With Router包装的情况下调用

使用Nuxt Apollo在Piniastore 中获取产品细节

Webpack在导入前混淆文件名

邮箱密码重置链接不适用于已部署的React应用程序

有效路径同时显示有效路径组件和不存在的路径组件

如何在独立的Angular 应用程序中添加Lucide-Angel?

在Puppeteer中使用promise进行日志(log)记录时出现TargetCloseError

如何在Web项目中同步语音合成和文本 colored颜色 更改

在每次重新加载页面时更改指针光标

从客户端更新MongoDB数据库

如何将PNG图像放在wix站点的Open Streemap map 上,使PNG图像成为 map 不可分割的一部分?

如何解析/data/build中的Angularnode_modules/chart.js/dist/Chart.js?