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

Question

У меня есть форма с некоторыми входами, я отправляю форму и отображаю данные в модальном режиме. Это работает, но я не уверен, что я делаю это правильно, и код выглядит грязно.

Вот как HTML выглядит (без модальности ради простоты):

<div id="app">
  <form @submit.prevent="getValues">
    <label>Last Name: </label><input type="text" name="lastName">
    <br>
    <button>Submit</button>
  </form>
</div>

Это экземпляр Vue и функция getValues ​​:

let app = new Vue({
    el: '#app',
    data:{
        lastName: ''
    },
    methods:{
        getValues(submitEvent){
            this.lastName = submitEvent.target.elements.lastName.value
        }
    }
})

Чтобы немного сократить код, я реализовал v-модель:

HTML:

<div id="app">
  <form @submit.prevent="getValues">
    <label>First Name: </label><input type="text" v-model="firstName">
    <button>Submit</button>
  </form>
</div>

Vue:

let app = new Vue({
    el: '#app',
    data:{
        firstName: ''
    },
    methods:{
        getValues(submitEvent){
            firstName = this.firstName
        }
    }
})

Работает тоже, но firstName = this.firstName смущает меня. Я попытался изменить имена, чтобы понять ссылки, но это не сработает. Используется ли вообще переменная firstName внутри getValues ​​или значение выводится из-за v-модального двухстороннего связывания (и я не могу сказать, потому что модальное не отображается до отправки формы)?

Вот JSFiddle, включающий оба подхода.

Какой из них правильный? Они взаимозаменяемы? В чем разница между ними?

Answer 1

Один метод использует события, другой использует двустороннюю привязку.

При отправке формы связанное событие вызывает метод (@submit.prevent="getValues"). Внутри этого метода вы читаете значение name и устанавливаете свойство lastName равным ему.

Когда вы делаете v-model="firstName" Vue, устанавливается двусторонняя привязка между значением поля ввода и значением firstName свойство.

Вы видите разницу в том, что при вводе в поле ввода оно сразу же обновляет свойство. За кулисами Vue обрабатывает событие изменения и обновляет свойство. Точно так же, если вы измените свойство данных другим способом, значение в поле ввода также будет обновлено.

Существует также третий вариант «простого» связывания. Это достигается с помощью тега v-bind. Это выполнит обновление свойства данных таким же образом, но не изменит значение поля ввода «в обратном порядке», если оно было изменено в другом месте.