Использование v-bind и v-on вместо v-модели vuejs

Question

Я использовал v-модель для обработки входных данных в форме, мне пришлось изменить ее, чтобы привязать значения реквизита, сначала вход был похож на

<input type="text" class="form-control" placeholder="" v-model="username">

, а теперь он выглядит как

<input type="text" class="form-control" placeholder="" v-bind:value="modelData.username" v-on:input="username = $event.target.value">

modelData идет в подпорках.и он имеет username.

при использовании модели, в data, я определил

data: () => {
  return {
    username: ""
  }
},

, и он работал нормально, но после изменения его на v-bind и v-on,

У меня вопрос, как теперь я могу получить значение username в методах?как и раньше, я получал его как this.username, чтобы получить значение, а также очистить его, но теперь, как я могу получить имя пользователя в

methods: {}

У меня есть кнопка для сохранения ввода

<button class="btn btn-secondary" type="button" @click="validateFormAndSave($event)">Save</button>

Когда мне позвонят validateFormAndSave, я могу получить this.username прямо сейчас, я не могу получить значение?Но Vue Doc говорит, что v-model и v-bind:value & v-on:input одинаковы?

ОБНОВЛЕНИЕ:

В имени пользователя может быть и не может быть какое-то значение, так как онозаполнено значением props, поэтому v-on:input="username = $event.target.value" не получают уже записанное значение, а только новое введенное вами значение?или отредактировать это?Почему это так?есть ли какой-нибудь способ просто получить то, что кто-то там набрал или уже набрал?

ОБНОВЛЕНИЕ:

Это становится очень неоднозначным.Итак, пока.1. Я могу установить v-bind:value, но я не могу получить его в методах без его редактирования.2. Я не могу установить this.username = "", и он также не будет удален из ввода.3. @input получает только то, что вы недавно набрали, а не то, что уже есть

Answer 1

Наилучшим решением может быть получение данных от реквизита, а также загрузка формы для v-models.

Использование функции watch компонента Vue.

ПервыйЯ добавил реквизиты как

  export default {
    props: ["vendorModelData"],

и затем пропускаю их через watch в v-model

watch: {
  vendorModelData() {
    this.updatePropsValue(this.vendorModelData)
    console.log("data updated")
  }
},

таким образом, он всегда загружается по-разному, когда меняются реквизиты.Таким образом, я должен был использовать v-model, а также загружать данные из реквизита в него.

Я нашел это полезным для меня.

Answer 2

v-модель - это просто синтаксический сахар для =>

:value="modelValue" @input="modelValue = $event.target.value"

Если вы хотите что-то еще, это очень легко сделать.Просто измените сторону обновления на onInput, поэтому =>

<input  class="form-control
    :value="username" 
    @input="username = $event.target.value" >
data: () => {
  return {
    username: ""
  }
},
mounted() 
{ 
  this.username = this.modelData.username;
},
methods:{
  consoleUsername() {
    console.log(this.username);
  }
}