Vue.js 与来自父级的数字相关的多个范围输入

我有4个范围输入。每一个都有最小值0，最大值10。 总共不可能超过22个

实现这一点的一种方法是，一旦输入达到22，就禁用所有输入，并添加一个重置按钮。我会发现，在达到最大值后，允许减小范围，而不是整个重置，这对用户更友好

我尝试禁用小于或等于0的滚动条，但滚动条仍处于控制之下

查看网页上的评论 ，但父类如下所示：

<template>
  <div class="vote">
    <div class="vote__title">Left: <span>{{ hmLeft }}</span> votes</div>
    <div class="vote__body">
      <div v-for="user in activeInnerPoll" :key="user._id">
        <userVoteFor :hmLeft="hmLeft" @cntCount="cntCount"  :id="user._id"/>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex"
import userVoteFor from "@/components/userVoteFor";

export default {
  name: "Vote.vue",
  components: {
    userVoteFor
  },
  data(){
    return {
      votes: 22,
      objRes: {} // that's where we write what id of a user and how many counts
    }
  },
  computed: {
    ...mapGetters("polls", ["activeInnerPoll"]), // array of objects {_id : "some_id", cnt: 0}
    hmLeft(){ // how much left, counter which tells how many votes left
      let sum = 0;

      for(let key in this.objRes){
        sum += this.objRes[key];
      }

      return this.votes - sum;
    }
  },
  methods: {
    cntCount(id, cnt){ // emit for children, gets id and cnt of input-range and sets to result obj
      this.objRes[id] = parseInt(cnt);
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/vars.scss";
@import "@/assets/base.scss";

.vote{
    &__title{
      @include center;
      margin-top: 15px;
      span{
        font-size: 20px;
        margin: 0 5px;
        color: $pink;
      }
  }
}
</style>

左：{{hmLeft}}票
从“vuex”导入{mapGetters}
从“@/components/userVoteFor”导入userVoteFor；
导出默认值{
名称：“Vote.vue”，
组成部分：{
userVoteFor
},
数据（）{
返回{
投票：22，
objRes:{}//这就是我们写用户id和计数的地方
}
},
计算：{
…mapGetters（“polls”，[“activeInnerPoll”]），//对象数组{u id:“some_id”，cnt:0}
hmLeft（）{//还剩多少票，计数器显示还剩多少票
设和=0；
for（输入此.objRes）{
sum+=this.objRes[key]；
}
返回此。票数-总和；
}
},
方法：{
cntCount（id，cnt）{//emit for children，获取输入范围的id和cnt并设置为result obj
this.objRes[id]=parseInt（cnt）；
}
}
}
@导入“@/assets/vars.scss”；
@导入“@/assets/base.scss”；
.投票{
&__头衔{
@包括中心；
边缘顶部：15px；
跨度{
字体大小：20px；
利润率：0.5px；
颜色：$粉红色；
}
}
}

儿童班：

<template>
  <div class="vote__component">
    <label class="vote__component__label" :for="id">{{ playerNameById( id )}}</label>
    <input @input="check($event)" // thought maybe something to do with event ?
           :disabled="disable"
           class="vote__component__input"
           :id="id"
           type="range"
           min="0"
           max="10"
           step="1"
           v-model="cnt">
    <div class="vote__component__res">{{ cnt }}</div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "userVoteFor.vue",
  props: {
      id: {
        type: String,
        required: true
      },
     hmLeft: {
        type: Number,
        required: true
      }
    },
  emits: ["cntCount"],
  data() {
    return {
      cnt: 0,
      disable: false,
      lastVal: 0
    }
  },
  computed: {
    ...mapGetters("user", ["playerNameById"]) // gets map object which stores names for user by id
  },
  methods: {
    check(e){
      console.log(e);
      if(this.hmLeft <= 0) { //HERE IS APART WHERE I THINK SHOULD BE WRITTEN LOGIC if hmLeft <= 0 then ... , else write cnt in resObj and computed var will calc how many votes left
        this.lastVal = this.cnt;
        this.cnt = this.lastVal;
      }
      else this.$emit("cntCount", this.id, this.cnt);
    }
  }
}
</script>

<style scoped lang="scss">
  .vote__component{
    width: 80%;
    margin: 10px auto;
    position: relative;
    display: flex;
    justify-content: right;
    padding: 10px 0;
    font-size: 15px;
    &__input{
      margin-left: auto;
      width: 60%;
      margin-right: 20px;
    }
    &__res{
      position: absolute;
      top: 20%;
      right: 0;
    }
    &__label{
    }
  }
</style>

{{playerNameById（id）}
{{cnt}}
从“vuex”导入{mapGetters}；
导出默认值{
名称：“userVoteFor.vue”，
道具：{
身份证：{
类型：字符串，
必填项：true
},
hmLeft：{
类型：数字，
必填项：true
}
},
发射：[“cntCount”]，
数据（）{
返回{
cnt:0，
禁用：false，
lastVal:0
}
},
计算：{
…mapGetters（“user”，[“playerNameById”]）//获取按id存储用户名称的映射对象
},
方法：{
支票（e）{
控制台日志（e）；
如果（this.hmLeft我实现这一点的方法是使用
watch
和
get
和
set
方法
computed

数值数组将通过计算更新。这使我们很容易连接到
v型
中，并允许我们保持与原始数组的反应性

然后使用手表计算可用的总数。然后，对于奖励积分，我们可以使用总数来调整输入的宽度，以便步长保持一致

即使这是使用合成Api，您也可以使用
数据
、
观察
和
计算
传统方式来实现


const makeRange=（最大值、VAL、索引）=>{
const defaultMax=10；
const num=Vue.computed({
获取：（）=>VAL[index]，
设置：值=>VAL[索引]=编号（值）
});
const total=Vue.computed（（）=>vals.reduce（（a，b）=>a+b，0），vals）；
const style=Vue.computed（（）=>{
返回`width:${（numMax.value*12+20）}px`
})
常量numMax=Vue.computed（（）=>{
返回Math.min（defaultMax，（num.value+max-total.value））
}，总数）；
返回{num，numMax，style}；
};
const app=Vue.createApp({
设置（）{
常数VAL=Vue.反应（[5,5,5]）
常数max=22；
常量范围=vals.map（（v，i）=>makeRange（max，vals，i））；
//视觉化助手
const total=Vue.computed（（）=>vals.reduce（（a，b）=>a+b，0），vals）；
const totaleft=Vue.computed（（）=>max-total.value，total.value）；
返回{ranges，vals，totaleft，total，max}；
}
}).mount（“#应用程序”）；


值：{range.num.value}
最大值：{range.numMax.value}

{{vals.join（+'）}={{total}
max是{max}，减去total{{total}}是{totaleft}