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>

现在我可以在5分钟内用jquery做到这一点，但是由于我是vuejs的初学者，所以我无法开发如何实现它的意义，我有一个组件，并且我想在每次按下按钮时重复该组件点击，这是小提琴！ fiddle

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。了解更多here。

在添加按钮上添加组件

1 个答案: