繁体   English   中英

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

Multiple range inputs related on number from parent

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有 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>
1 个回复

我实现这一点的方法是使用watchcomputedgetset方法。

值数组将通过计算更新。 这使得挂钩到v-model变得很容易,并允许我们保持与原始数组的反应性。

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

即使这是使用组合 Api,您也可以使用datawatchcomputed经典方式来实现它

 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>

1 绑定来自父级的多个反应组件

我刚开始使用React,对某些事情感到困惑。 假设我有一个Login控制器视图(智能组件),然后是一个LoginForm视图(哑组件),并且在LoginForm中,我创建了自定义组件来处理此页面上的所有输入。 然后,我不确定在创建顶级登录控制器视图的渲染功能时如何 您如何获得针对 ...

2 Odoo 10:相关字段和来自第三父级的继承

我想知道是否有一个很好的方法来显示从第三个父级继承的数据。 为了阐明这个问题,让我们举个例子。 假设我们有4个表: 部门 小组 Teams_employees 雇员 每个部门有很多团队( many2one关系),每个团队包含很多员工( many2 ...

5 无法设置来自iframe的父级隐藏输入!

我的主页上有一个iframe,并且该iframe主要使用php代码(src是php文件)。 在此iframe的底部,我有以下内容: 在主文件(父文件)中,我有这个隐藏的输入,我正尝试使用js从iframe进行设置: 当我尝试从iframe内部设置此隐藏输入的值时,没有任何反 ...

6 清除来自 React 父级的无线电输入

当我循环浏览一些问题时,在尝试清除无线电输入时遇到了一些问题。 这是我的设置。 当我单击触发“handleNextQuestion”的按钮时,想要 setCheckedFalse 以清除所有答案。 目前我根本无法点击任何答案,因为它们似乎被锁定为错误。 } ...

7 交错插入多个键/值范围的父级效果

我们正在考虑将用户交互与用户表进行交互,唯一的问题是每个用户将有数万次交互,因此一个键值范围的64MB极少适合。 CockroachDB文档指出: 如果为根表的任何主键值存储的交织数据量大于键值范围的最大大小(默认为64MB),则交织优化将减少。 那么,性能下降会有多 ...

8 来自多个日期范围的iReport输入

我正在使用iReport,并且希望能够接受4个日期输入(2个日期范围) dateRange1和dateRange2 。 每个人都将忽略在指定范围内给出的项目数量和成本。 到目前为止,我有第一个dateRange1可以正常工作,但是我很难弄清楚要插入第二个日期范围。 这是我的代码 ...

10 jQuery:如果子级包含文本数字范围,则隐藏父级?

我使用当前的jQuery选择器将CSS应用于YouTube上包含某些关键字的任何元素,如下所示: 我的问题是,如何更改它,而不是使用关键字检测,而可以对订阅页面(已登录)上的每个YouTube Feed使用数字检测范围 ? 如果用于显示观看次数的元素位于特定的元素“ .feed-ite ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM