Question

<template v-for="(paint, index) in paints">
 <input type="number" v-bind:min="1" v-model.number="paint.qty">
</template>

-

var paintListApp = new Vue({
    delimiters: ['${', '}'],
    el: '#paintListApp',
    data: {
        paints: paints
    },
    methods: {
        addToSet: function(sku, name, image) {
            // method triggered when item is clicked - sends data to event bus
            this.$eventHub.$emit('addToSelectedPaints', sku, name, image)
        }
    }
});

var paintWidget = new Vue({
    el: '#paintWidget',
    delimiters: ['${', '}'],
    data: {
        paints: []
    },
    created() {
        // data picked up - processed by 'addToSelectedPaints'
        this.$eventHub.$on('addToSelectedPaints', this.addToSelectedPaints);
    },
    methods: {
        addToSelectedPaints: function (sku, name, image) {
          var skuIndex = _.findIndex(this.paints, function (o) { return o.sku === sku; });
          if (skuIndex !== -1) {
            this.paints[skuIndex].qty = this.paints[skuIndex].qty + 1;
          } else {
            this.paints.push({
              sku: sku,
              name: name,
              image: image,
              qty: 1
            });
          }
      }
    }
});

尝试获取最小值以处理数字输入。浏览器编号加/减控件可以满足最小值 - 但是，使用键盘时，min属性似乎被忽略。我已尝试过各种各样的事情，包括添加由keyup等触发的方法并测试值，直到观察者。

键盘变得混乱，因为删除时，它会自动添加1 ...使得难以键入19以上的数字...（例如，你退格输入2，但是 - 它插入1）。

我只需要使用键盘输入来获取本机浏览器输入min属性。

**编辑**

<input type="number" v-model="paint.qty" @change="paint.qty = paint.qty < 1 ? 1 : paint.qty">

排序解决了问题，尽管以min属性为代价。挂钩@change事件。如果输入小于1，则将其切换为1.在输入失去焦点之前，它也不会更新 - 不会将ui锁定。所以不完全是我希望它工作的方式 - 但结果是一样的。

**编辑**

我已经调整了Richard Matsens的回答（已接受的回答）来使用输入和超时......这表现得更像Chrome和Firefox本机实现。

<input type="number" min="1" v-model.number="paint.qty" @input="handleUpdate($event, index)">

并在handleUpdate方法中：

  ...handleUpdate(event, index) {
    var updater;
    clearTimeout(updater);

    this.currentIndex = index;
    var paints = this.paints;
    var max = this.max;

    updater = setTimeout(function() {
      if(event.target.value < event.target.min) {
        paints[index].qty = parseInt(event.target.min);
      }
      if(event.target.value > max){
        console.log(max);
        paints[index].qty = parseInt(max);
      }
    }, 1000);
  }...

清除超时以防止更新器位发射太多次 - 弹跳/糖化等...

Answer 1

从此Validate input type number with range min/max

大多数浏览器“忽略”（这是它们的默认行为）min和max，这样用户就可以自由编辑输入字段并输入不在1-5范围内的数字。

从How to detect changes in nested data开始，可以使用控件上的@input和method()来处理检查。

~~适用于min="0"，但如果用户想要输入＆＃34; 11＆＃34;~~

，则说min="1"可能会有问题。

更改为blur事件以处理上述警告。

methods: {
  handleUpdate(event, index) {
    if(event.target.value < event.target.min) {
      this.paints[index].qty = event.target.min;
    }
  }
},

还将@blur()添加到输入

<div >
  <input v-for="(paint, index) in paints" 
    @blur="handleUpdate($event, index)"
    type="number" min="2" v-model.number="paint.qty">
</div>

为了完整起见，您可能还需要添加验证消息，以便用户知道输入值的更改原因。

表格编号输入不适用于密钥

1 个答案: