Служебный метод в Vue.js

Question

Я пытаюсь создать служебный метод в Vue.js для проверки десятичного числа из любого поля ввода, но я не уверен, как установить значение в 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 для активирования динамического свойства.Это должно сделать метод более универсальным для любых динамических полей ввода с любым именем свойства.