Как мне скопировать V-модели: значение с: значение? - PullRequest
Новая
       28

Как мне скопировать V-модели: значение с: значение?

0 голосов
/ 18 февраля 2019

Я получаю различное поведение между использованием @input и v-model, а также @input и :value.

Чем отличается v-модель от: значения, которое я не получаю только при использовании:значение?

Я создал пример в jsFiddle , который показывает разницу: верхнее поле ввода будет позволять вводить только цифры, а нижнее - все, что будет набрано.в.

Что мне нужно сделать, чтобы получить ту же функциональность, используя только @input и :value?

1 Ответ

0 голосов
/ 18 февраля 2019

Этого можно добиться, добавив ссылку на вход и обновив значение ввода через него.Проверьте здесь.https://jsfiddle.net/RiddhiParekh/nzfr0xy3/

Шаблон => 

    <div id="app">
  <div>
    <input @input="mask1" 
           v-model="message1" 
           type="text" 
           placeholder="Only numbers are allowed">
    <p>Message1 is: {{ message1 }}</p>
    <hr/>
    <input @input="mask2" 
           :value="message2"
           type="text"
           ref="myInput"
           placeholder="Try numbers">
    <p>Message2 is: {{ message2 }}</p>

  </div>
</div>

Скрипт => 

 new Vue({
  el: "#app",
  data: {
   message1: "",
   message2: ""
  },
  methods: {
    mask1(input){
        const validCharsForNumberFields = /[0-9]*(,|\.)?[0-9]*/gm
      this.message1 = input.target.value.match(validCharsForNumberFields)[0]
        },
    mask2(input){
      const validCharsForNumberFields = /[0-9]*(,|\.)?[0-9]*/gm
      console.log(input)
      this.$refs.myInput.value = input.target.value.match(validCharsForNumberFields)[0]
      this.message2 = this.$refs.myInput.value
    },

  }
})
...