Question

我正在尝试使用VueJS构建一个唯一的数字字段。它有点有用，但有些不对劲：

通过：在文本字段中输入12，VueJS中的值为12，视觉为12。
FAILS：在文本字段中输入12a，VueJS中的值为12，视觉为12a。（预期行为在文本字段中为12）
通过：在文本字段中输入12a4，VueJS中的值为12a4，视觉为124

您可以尝试使用我制作的这个JSFiddle：https://jsfiddle.net/El_Matella/rr2qex8k/

这是我的文本字段组件：

const TextField = {
    template: '<div><input type="text" v-model="copy"></div>',
        props: ['value'],
        data () {
        return {
            copy: null
        }
    },
    created () {
        this.copy = this.value.toString()
    },
    watch: {
        value () {
            this.copy = this.value.toString()
        },
        copy () {
            this.$emit('input', this.copy)
        }
    }
}

以下代码应该允许我将该文本字段组件用作唯一的数字文本：

new Vue({
    el: '#app',
    data: {
        number: 1
    },
    methods: {
        update (value) {
            this.number = parseInt(value.replace(/\D/g, ''))
        }
    },
    components: {
        TextField
    }
})

问题是当最后输入的char是非数字值时，输入字段不会更新。您必须输入其他数值才能更新输入并删除非数字字符。

Answer 1

在输入标记

上尝试此操作

df.groupby('pid').filter(lambda x : (x['drug']=='B').any())
Out[18]: 
   pid drug
0    1    A
1    1    B
2    1    C
6    3    B
7    3    C
8    3    D

或

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>

您可以在此检查兼容性：

https://caniuse.com/#search=type%3D%22number%22

Answer 2

您可以在计算值上使用getter和setter来清除输入值：

const TextField = {
    template: '<div><input type="text" v-model="inputValue"></div>',
    props: ['value'],
    data(){
        return {
            number: 0
        }
    },
    computed: {
        inputValue: {
            get: function(){
                return this.number;
            },
            set: function(value){
                this.number = parseInt(value.replace(/\D/g, ''))
            }
        }
    }
}

创建一个唯一的数字文本字段

2 个答案: