Adding vee-validate / HTML attributes to input element in slot

Question

In my application I have a lot of forms and most inputs look exactly like this:

<div class="form-group">
    <label for="language">{{ $t('form.language')}}</label>
    <input type="text" class="form-control" id="language" name="form.language" v-model="language" v-validate.initial="'required'" :data-vv-as="$t('form.language')" />
    <span class="invalid-feedback">{{ errors.first('language') }}</span>
</div>

This gets duplicated over and over again. The only thing that really changes is the name of the field and the input type. Sometimes it is a select and sometimes it is a more complex component instead of simple HTML one.

My idea is to create some kind of wrapper component. So I dont have to copy all this and simply use something like that:

<form-group name="language">
    <input type="text" v-model="form.language">
</form-group>

I tried to implement it that way, but it doesnt work:

<template>
    <div class="form-group">
        <label :for="name">{{ $t('form.' + name)}}</label>
        <slot class="form-control"
              :id="name"
              :data-vv-name="name"
              v-validate.initial="'required'"
              :data-vv-as="$t('form.'+ name)">
        </slot>
        <span class="invalid-feedback">{{ errors.first(name) }}</span>
    </div>
</template>

<script>
    export default {
        props: ['name']
    }
</script>

Do you have any ideas? The problem is that I cannot pass mixins and props easily to the slotted element/component.

Answer 1

How about scoped slots (Vue 2.5.0+)?

<!-- form-group.vue -->
<template>
  <div>
    <label />
    <slot v-bind="$props" />
    <span />
  </div>
</template>

Above, all the props of <form-group> is bound to the slot using v-bind. You may want to specify certain fields only: <slot :id="name" :data-vv-name="name" />

<form-group name="age">
  <input type="number" slot-scope="slotProps" v-bind="slotProps" />
</form-group>

Here, the <input> can access the slot props by using slot-scope, giving it a name (here slotProps). slotProps will contain all the props of <slot> as defined in form-group.vue.

Some more examples:

<form-group name="language">
  <input type="text" slot-scope="sp" v-bind="sp" />
</form-group>

<form-group name="hello" value="friend">
  <span slot-scope="sp">
    {{ sp.name }}: {{ sp.value }}
  </span>
</form-group>