Блог

Я знаю о v-model , но сначала мне нужно прояснить v-bind поведение.

Рассмотрим приведенный ниже пример:

 <div id="app">
  <input 
    type="text" 
    :value="inputtedValue"
    @input="() => { onInput() }"
  >
</div>
  

 export default {
  name: "App",
  data() {
    return {
      inputtedValue: ""
    }
  },
  methods: {
    onInput() {
      console.log(this.inputtedValue);
    }
  }
};
  

🌎 Скрипка

Верна ли моя гипотеза об этом примере?

1. :value="inputtedValue" не означает « :value значение атрибута (тавтология?) полностью зависит от inputtedValue «; это может отличаться.
2. Скорее это означает «При inputtedValue обновлении :value значение атрибута будет обновлено», но если ввести новое значение в поле ввода, Vue не узнает об этом.

Но наиболее интересные экспериментальные данные:

3. Если inputtedValue не было изменено, мы не можем изменить значение value атрибута, даже если оно не совпадает с inputtedValue .

Предположим, мы хотим удалить знаки минуса из ввода:

 <div id="app">
  <input 
    type="text" 
    :value="inputtedValue"
    @input="$event => { onInput($event.target.value) }"
  >
</div>
  

 export default {
  name: "App",
  data() {
    return {
      inputtedValue: ""
    }
  },
  methods: {
    onInput(rawValue) {
      
     if (rawValue.includes("-")) {
       this.inputtedValue = rawValue.replace("-", "");
     } else {
       this.inputtedValue = rawValue;
     }

     console.log(this.inputtedValue);
    }
  }
};
  

🌎 Заполнение

Если ввести минус, this.inputtedValue = rawValue.replace("-", ""); существующее значение не изменится this.inputtedValue . Итак, мы снова имеем несоответствие значений this.inputtedValue и value атрибута:

Что я хочу вместо этого?

1. Пользователь вводит символ
2. Если символ допустим — добавьте его в input элемент и выдайте input событие (для компонентов)
3. Если символы недопустимы — не добавляйте их в input элемент и не генерируйте input событие (для компонентов)

v-model поведение отличается:

1. Пользователь вводит символ
2. значение привязанной переменной изменяется

Теперь мы считаем введенное значение недопустимым, мы можем изменить привязанное значение, и vue изменит значение ввода. Слишком много движений, а также мы не можем сравнить новое значение и предыдущее.

Чтобы предотвратить появление нежелательных символов в вашем текстовом поле, даже если оно введено, вам действительно нужно использовать @keydown обработчик. Вы также можете использовать вычисляемое свойство с помощью getter и setter для управления потоком данных при использовании v-model

 <input type="text" v-model="editableValue" @keydown="checkSymbol">
  

 export default {
  data: () => ({ inputtedValue: "" }),
  computed: {
    editableValue: {
      get: vm => vm.inputtedValue,
      set (rawValue) {
        this.inputtedValue = rawValue
        this.$emit("input", this.inputtedValue)
      }
    }
  },
  methods: {
    checkSymbol($event) {
      if ($event.key === "-") {
        $event.preventDefault();
      }
    }
  }
}