UI Компоненты

UI Input

Значение modelValue не меняется при вводе текста в input

Во vue-2
можно было использовать всего один v-model и связывание всегда шло с пропсом value. И для того чтобы это связывание осуществить использовалось событие onInput. Подобное реализовывалось на input-ах, но это применимо к любому абсолютно компоненту, которому мы хотим сделать двустороннию привязку.

Во vue-3
Мы можем использовать множественный v-model. При этом он может быть без явного указания атрибута, с которым идёт связывания (как в случае vue-2), так явным (с именованными пропсами).

modelValue

Но что происходит без явного указания атрибута
Он всегда работает с пропсом, который называется modelValue

Мы генерируем событие, которое называется по особому шаблону
update:ИмяАтрибута

Без явного указания атрибута
update:modelValue

Реализация двустороннего связывания

src\components\UI\MyInput.vue

<template>
<input :value="modelValue" @input="updateInput" class="input" type="text">
</template>

<script>
export default {
 name:'my-input',
 props:{
 modelValue:[String,Number]
},
methods:{
 updateInput(event){
  this.$emit('update:modelValue',event.target.value)
 }
}
}
</script>

<style scoped>
перенос с компонента PostForm
.input {
 width:100%;
 border:1px solid teal;
 padding: 10px 15px; 
 margin-top: 15px;
}
</style>