добавление компонента на кнопку добавления

Question

Я абсолютный новичок в vuejs, у меня есть функция добавления динамических полей ввода по нажатию кнопки, которая будет продолжать добавлять строки, и иметь в виду, что счетчик также должен увеличиваться, чтобы я мог проверить на бэкэнде, этомой код до сих пор

<div id="settlement_container" class="container-fluid mt-4">
    <div class="card rounded-0 shadow-lg">

        <div class="card-body p-0">

            <div class="card-header px-2">
                <div class="row wow fadeIn">
                    <div class="col-5">
                        <h3>Add Store Status</h3>
                    </div>
                </div>
            </div>

            <form class="custom-form-group" action="{{url('stores/addStoreStatusDB')}}" method="POST">

                <div class="form-group col-6">
                    <label for="exampleInputEmail1">Tax</label>
                    <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" name="tax" placeholder="Tax" required>
                </div>

                <div class="display-inline">
                    <div class="form-group col-md-6">
                        <button @click="addstatus" class="btn btn-primary">Add Rows</button>
                    </div>
                </div>

                <div class="display-inline">
                    <div class="form-group col-md-6">
                        <button type="submit" class="btn btn-primary">Update Tax</button>
                    </div>
                </div>

                <dynamic-rows/>

            </form>
        </div>

    </div>

</div>
{{--  Main layout  --}}
@push('script')
<script src="{{ asset('js/app_vue.js') }}" ></script>
<script>

Vue.component('dynamic-rows',{
//accept data inside template
props:['counter'],
//accept data inside template

template:"<label for='exampleInputEmail1'>counter</label>"
});

    const app = new Vue({
        el: '#settlement_container',
        data: {
            counter:0
        },
        component:['dynamic-rows'],
        methods:{
            addstatus:function(e){
                appendDiv=""
                e.preventDefault();
                alert("inside");
            }
        }
    });
</script>

Теперь я могу сделать это в JQuery за 5 минут, но, поскольку я новичок в Vuejs, я не могу понять, как это сделать, у меня есть компонент иЯ хочу повторять компонент каждый раз, когда нажимается кнопка, вот скрипка! скрипка

Answer 1

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

Добавление входных данныхЯ думаю, что имеет больше смысла, чтобы значения были в массиве.Используя Vue, вы можете перебирать этот массив, чтобы каждый элемент массива имел свой собственный <input/>, а также просто добавлять другой элемент массива для добавления нового ввода:

<template>
    <div>
        <div v-for="(tax, index) in taxes" :key="index">
            <input v-model="taxes[index]" />
        </div>
        <button type="number" @click="add">Add</button>
        <p>Count: {{taxes.length}}</p>
    </div>
</template>

<script>
    export default {
        data(): {
            return {
                taxes: [0]
            }
        },
        methods: {
            add() {
                this.taxes.push(0);
            }
        }
    });
</script>

Теперь, что касается счетчика, яне знаю, что вы имеете в виду проверить на бэкэнде.Вы могли бы добавить наблюдателя в массив taxes и обрабатывать изменения там?Наблюдатели используются с осторожностью, так как вычисляемые свойства гораздо предпочтительнее, но они могут иметь смысл, если вам нужно отправлять данные на сервер, а не в DOM.

Прописка counter, которую вы зарегистрировали в своем коде,на самом деле не собираюсь работать по шаблону, который я показал.Обычно реквизиты предназначены для родительских компонентов для передачи данных дочерним компонентам.Предпочтительным шаблоном при отправке данных от потомка к родителю является использование $ emit.Подробнее здесь .