Как вынести форму в отдельный компонент на Vue.js
Есть главная страница на которой я передаю массив данных в компонент формы
<template>
<div class="main">
<section class="section parts-section">
<div class="parts-container">
<div class="parts-inputs">
<div class="parts-header">
<div class="header-wrapper">
<div class="title">
<div class="title-text">
<h6>Поиск аналогов</h6>
</div>
</div>
<div class="change-form-wrapper">
<div class="change-form-btn">
<input v-model="changeInputForm.type" id="radio-1" type="radio" name="radio"
value='model' checked>
<label for="radio-1">Модель</label>
</div>
<div class="change-form-btn">
<input v-model="changeInputForm.type" id="radio-2" type="radio" name="radio"
value='garageNumber'>
<label for="radio-2">Гаражный номер</label>
</div>
<div class="change-form-btn">
<input v-model="changeInputForm.type" id="radio-3" type="radio" name="radio"
value='vendorCode'>
<label for="radio-3">Артикул</label>
</div>
</div>
</div>
</div>
<!-- <form class="input-block" v-if="changeInputForm.type === 'model'">-->
<!-- <div class="input-wrapper">-->
<!-- <div class="input-text">-->
<!-- <label for="modelTechnique">Модель TC</label>-->
<!-- <input type="text" v-model="modelTechnique" id="modelTechnique">-->
<!-- </div>-->
<!-- <div class="input-text">-->
<!-- <label for="modelEngine">Модель ДВС</label>-->
<!-- <input type="text" v-model="modelEngine" id="modelEngine">-->
<!-- </div>-->
<!-- <div class="input-text">-->
<!-- <label for="materials">Запчасть</label>-->
<!-- <input type="text" v-model="materials" id="materials">-->
<!-- </div>-->
<!-- <div class="input-button">-->
<!-- <button @click="postAnalog" :disabled="showSpinner" class="btn" type="submit">-->
<!-- <span class="button-spinner" v-if="showSpinner"></span>-->
<!-- <span class="input-button-text" v-show="!showSpinner">Отправить</span>-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </form>-->
<inputs-block
:inputLabels="inputLabels"
:postAnalog="postAnalog"
:changeInputForm="changeInputForm"
:changeInputFormType="'model'"
:datePicker="datePicker"
:showSpinner="showSpinner"
></inputs-block>
....
<script>
....
const inputLabels = [
{
name: 'Модель ТС',
value: 'modelTechnique'
},
{
name: 'Модель ДВС',
value: 'modelEngine'
},
{
name: 'Запчасть',
value: 'materials'
},
];
...
</script>
Код компонента
<template>
<form class="input-block" v-if="changeInputForm.type === changeInputFormType">
<div class="input-wrapper">
<div class="input-text" v-for="(item,i) in inputLabels">
<label>{{item.name}}</label>
<input type="text" v-model="item.value" >
</div>
<!-- <div class="input-text">-->
<!-- <label for="modelEngine">Модель ДВС</label>-->
<!-- <input type="text" v-model="modelEngine" id="modelEngine">-->
<!-- </div>-->
<!-- <div class="input-text">-->
<!-- <label for="materials">Запчасть</label>-->
<!-- <input type="text" v-model="materials" id="materials">-->
<!-- </div>-->
<div class="datepicker" v-if="datePicker">
<label class="input-label" for="datePicker">Диапазон дат</label>
<VueDatePicker v-model="date"
range
:max-date="new Date()"
:enable-time-picker="false"
locale="ru"
cancelText="Отменить"
selectText="Применить"
required
id="datePicker"
>
</VueDatePicker>
</div>
<div class="input-button">
<button @click="postAnalog" :disabled="showSpinner" class="btn" type="submit">
<span class="button-spinner" v-if="showSpinner"></span>
<span class="input-button-text" v-show="!showSpinner">Отправить</span>
</button>
</div>
</div>
</form>
</template>
<script>
export default {
name: 'inputsBlock',
data(){
return{
date: null,
startDate: null,
endDate: null,
}
},
model:{
event: 'input'
},
props: ['inputLabels','postAnalog','showSpinner','changeInputForm','changeInputFormType','datePicker'],
}
</script>
Внутри инпутов в которых мы прописали v-model отображаются данные переданные в v-model.Как исправить?
Источник: Stack Overflow на русском