Как вынести форму в отдельный компонент на Vue.js

Рейтинг: 0Ответов: 1Опубликовано: 19.07.2023

Есть главная страница на которой я передаю массив данных в компонент формы

<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.Как исправить?

введите сюда описание изображения

Ответы

▲ 0Принят

Не передавать начальные значения

   const inputLabels = [
{
    name: 'Модель ТС',
    value: 'modelTechnique'
},
{
    name: 'Модель ДВС',
    value: 'modelEngine'
},
{
    name: 'Запчасть',
    value: 'materials'
},

];

Вы можно сказать хардкодом передали эти значения в дочерний компонент UPD: Как вариант, вы можете создать просто placeholder для каждого инпута, заместо передачи массива