vuejs / Discussion

Vue.js discussion
166 stars 17 forks source link

Template serve for multipurpose #1306

Open WeeHong opened 7 years ago

WeeHong commented 7 years ago

Hello everyone,

I would like to know is that possible to use ONE template script to perform add and delete function?

Because I don't want to create a same template to serve the two functions.

<script type="text/x-template" id="category-template">
    <transition name="modal">
        <div class="modal-mask">
            <div class="modal-wrapper d-flex justify-content-center align-items-center">
                <div class="modal-container">

                    <div class="modal-header">
                        <slot name="header">
                        default header
                        </slot>
                    </div>

                    <div class="modal-body">
                        <form method="POST">
                            <div class="form-group" :class="{'has-error': errors.has('category') }">
                                <input v-validate="'required'" type="text" class="form-control" name="category" id="category" placeholder="Category name">
                                <span v-cloak v-show="errors.has('category')" class="text-danger">@{{ errors.first('category') }}</span>
                            </div>  
                            <div class="form-group text-center">
                                <button type="submit" class="btn btn-primary">Create</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</script>