與來自父級的數字相關的多個范圍輸入

Question

我有 4 個范圍輸入。 他們每個人的最小數字為 0，最大數字為 10。它們的總和不能超過 22。

解決此問題的一種方法是在所有輸入達到 22 后禁用所有輸入並添加一個重置按鈕。 我會發現它更加用戶友好，允許在達到最大值而不是整個重置后減小范圍。

如果它小於或等於 0，我嘗試禁用它，但滾動條仍在控制之下。

如果更容易，請查看沙箱的注釋，但父 class 如下：

<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>

兒童 class 在這里：

<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>

Answer 1

我實現這一點的方法是使用watch和computed的get和set方法。

值數組將通過計算更新。 這使得掛鈎到v-model變得很容易，並允許我們保持與原始數組的反應性。

然后使用手表來計算可用的總數。 然后，對於加分，我們可以使用總來調整輸入的寬度，使步長保持一致。

即使這是使用組合 Api，您也可以使用data 、 watch和computed經典方式來實現它

 const makeRange = (max, vals, index) => { const defaultMax = 10; const num = Vue.computed({ get: () => vals[index], set: value => vals[index] = Number(value) }); const total = Vue.computed(() => vals.reduce((a, b) => a + b, 0), vals); const style = Vue.computed(() => { return `width: ${(numMax.value * 12 + 20)}px` }) const numMax = Vue.computed(() => { return Math.min(defaultMax, (num.value + max - total.value)) }, total); return {num, numMax, style}; }; const app = Vue.createApp({ setup() { const vals = Vue.reactive([5, 5, 5]) const max = 22; const ranges = vals.map((v,i)=>makeRange(max, vals, i)); // helpers for visualising const total = Vue.computed(() => vals.reduce((a, b) => a + b, 0), vals); const totalLeft = Vue.computed(() => max - total.value, total.value); return {ranges, vals, totalLeft, total, max}; } }).mount('#app');

 <script src="https://unpkg.com/vue@3.0.2/dist/vue.global.prod.js"></script> <div id="app"> <li v-for="range in ranges"> <input:style="range.style.value" type="range" min="0":max="range.numMax.value" v-model="range.num.value" > value: {{range.num.value}} max: {{range.numMax.value}} </li> <li>{{ vals.join(' + ') }} = {{ total }}</li> <li>max is {{ max }}, minus total {{total }} is {{ totalLeft }}</li> </div>