webpack + vue 中input标签不能实时响应数据绑定。

Question

在input表单中 有两个控制数字加减的按钮，我设置了当数小于0时，取负，这样就永远可以取不到负数，但是我用watch监听时，不会立即响应，只有当我移出input的时候才响应，这种情况只有在火狐浏览器中才能正常使用，而在其他浏览则会出现上述情况（包括safari），求解决。
移出后

源码

template中

<input placeholder="最低价" v-model="minPrice" type="number"><span class="to"></span><input v-model="maxPrice" type="number" placeholder="最高价">

script 中

    module.exports = {
        data: function () {
            return {
                minPrice: '',
                maxPrice: '',
            }
        },
        methods: {

            min: function () {
                var scope = this;
                if (scope.minPrice < 0) {
                    scope.minPrice = (-scope.minPrice);
                    console.log(scope.minPrice);
                }
            },
            max: function () {
                var scope = this;
                if (scope.maxPrice < 0) {
                    scope.maxPrice = (-scope.maxPrice);
                }
            }
        }, watch: {

            'minPrice': "min",
            'maxPrice': 'max',
        }
    }

Answer 1

请使用 v-model.number