CODEWITHSUNDEEP
htmltemplatesvue.jsdryextends
JordanBarber
JordanBarber

Reputation: 2101

Create reusable block of vue template within creating new component

In some instances, I need to just repeat some html code within my Template to DRY it up, but making a new component and passing a ton of props and dynamic data to it seems like overkill. Is there a way to define a repeatable block of template code that can just be reused?

A good example of this is my vuelidate validation error messages that are repeated. I don't want to create an entire vue component for them because then I need to pass in the validation, validation prop and a few other things so that seems like creating more complexity just to DRY up a little bit of the template.

I have this block of code on three different scenarious in the same template, is there a way I can just define them as a block to reuse. Literally nothing changes so it's very much against DRY principles.

<span
   v-if="!$v.initialReplyText.required"
   class="error">Your reply cannot be empty.</span>
<span
   v-if="!$v.initialReplyText.maxLength"
   class="error">Your reply cannot be over 2,000 characters.</span>

Upvotes: 6

Views: 2892

Answers (2)

Daniel
Daniel

Reputation: 35694

you can do dynamic binding using v-bind, that way you don't need to bind all properties individually.

<!-- pass down parent props in common with a child component -->
<child-component v-bind="$props"></child-component>

src: https://v2.vuejs.org/v2/api/#v-bind

You can also use slots, or scoped slots, which are commonly used for things like wrapping error messages in more complex markup.

Upvotes: 1

LMK
LMK

Reputation: 1561

If all elements are consecutively arranged as in your example, you can use v-for as below:

<span v-for="(criteria, msg) in {'Your reply cannot be empty.': !$v.initialReplyText.required, 'Your reply cannot be over 2,000 characters.': !$v.initialReplyText.maxLength }" 
      v-if="criteria" class="error">
    {{msg}}
</span>

Upvotes: 0

Related Questions