Question

我试图在Vue.js中创建一个实用程序方法，以验证 any 输入字段中的十进制数字，但是我不确定如何在内部设置Vue.js中的值。

这是我之前在jQuery中所做的：

$('body').on('blur', '.decimal', function() {
    var val = $(this).val();
    if ($.isNumeric(val)) {
        val = parseFloat(val).toFixed(2);
        $(this).val(val);
    } else {
        $(this).val('');
    }
});

这是我在Vue中拥有的东西，但该值未在内部存储并被覆盖。

function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

methods: {
    validateDecimal: function (e) {
        var val = e.target.value;

        if (isNumeric(val)) {
            e.target.value = parseFloat(val).toFixed(2);
        } else {
            e.target.value = '';
        }
    }
}

HTML

<input class="ui-input" :value="some.value" placeholder="0.00" @blur="validateDecimal">
<input class="ui-input" :value="some.othervalue" placeholder="0.00" @blur="validateDecimal">
<input class="ui-input" :value="another.dynamic.input" placeholder="0.00" @blur="validateDecimal">

Answer 1

显然，您可以像这样将数据对象引用传递给处理程序方法：（请注意，您不能只传递data属性，因为我不认为它将是引用。）

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    inputs:{
      'v1':{
        value:'1.256'
      },
      'v2':{
        value:'1.521'
      }
    },
    someInput:{value:'1.7125'}
  },
  methods:{
    validateDecimal: function (o,p,e) {
        console.log('validateDecimal',o);
        var val = e.target.value;
        console.log(val);
        if (Number(parseFloat(val)) == val) {
            val = parseFloat(val).toFixed(2);
            this.$set(o, p, val);
        } else {
            this.$set(o, p, '');
            e.target.value = '';
        }
    },
    foo: function(){
      console.log(this.inputs.v1.value)
      console.log(this.inputs.v2.value)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="i,key in this.inputs">
    <input class="ui-input" :value="i.value" placeholder="0.00" @blur="validateDecimal(i, 'value', $event)">
  </div>
  <div>
    <input class="ui-input" :value="this.someInput.value" placeholder="0.00" @blur="validateDecimal(someInput,'value', $event)">
  </div>
  <button @click="foo">Click</button>
</div>

由OP编辑：为属性名称添加一个额外的参数，并使用$set使动态属性具有反应性。这应该使该方法对于具有任何属性名称的任何动态输入字段更具通用性。

Vue.js中的实用程序方法

1 个答案: