vue.js - Vue, I'm trying to do poll page having an issue implamenting using Vue + input radio

Question

Basically I have a list of users. Where you can poll for each of them with input radio. Which renders from 1 to 10, so for 1 user you can give 1 to 10 of your votes. But what I want to do with a good user interface. You can vote for users but your votes are limited. In our case 22. And if you have not enough votes to vote for another user it simply makes it as many radios as you have left votes. I mean you have 22 votes and 4 users. You gave 2 times 10, then you have 2 votes left and then for next users it renders only 2 input radios, not 10. Result should be in resObj which has key as id of user and val is how many votes selected user has.

What so far I have is parent component:

<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 userVoteFor from "@/components/userVoteFor";

export default {
  name: "Vote.vue",
  components: {
    userVoteFor
  },
  data(){
    return {
      votes: 21,
      objRes: {},
      activeInnerPoll: [{_id: "hajhi2ouh3"}, {_id: "flkjhdlfn54j34"}, {_id: "ft5tvewrv"}, {_id: "fasdfac34"}]
    }
  },
  computed: {
    hmLeft(){ //how many votes left, computed which counts results of so far given votes
      let sum = 0;

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

      return this.votes - sum;
    }
  },
  methods: {
    cntCount(id, cnt){
      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>

Child and that's where I stuck and don't know how to implement, I deleted my try and here is just empty template. Will post my try shortly, just don't want to pull you away from solution with my idea on solving a problem

<template>
  <div class="vote__component">
    <div class="vote__component__name">{{ id }}</div>
    <div v-for="num in max" :key="num">
       <label class="vote__component__label" :for="id">{{ num }}</label>
       <input @change="stepCount" type="radio" :id="id" :value="num" v-model="cnt">
</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 {
      defaultMax: 10,
      cnt: 0,
      max: 10
    }
  },
  computed: {
    ...mapGetters("user", ["playerNameById"]),
  },
  methods: {
    stepCount(){
      this.$emit("cntCount", this.id, this.cnt);
    }
  },
  watch: {
    cnt: function(val){
      this.max = this.defaultMax - val > this.hmLeft ? this.hmLeft : this.defaultMax;
    }
  }
}
</script>

<style scoped lang="scss">
  .vote__component{
    width: 80%;
    margin: 10px auto;
    position: relative;
    display: flex;
    padding: 10px 0;
    font-size: 15px;
  }
</style>

question from:https://stackoverflow.com/questions/65931477/vue-im-trying-to-do-poll-page-having-an-issue-implamenting-using-vue-input-r

Answer 1

Waitting for answers