Dynamic components question

[brandonn1231]

Thanks for making this awesome plugin :) I'm trying to apply the jsfiddle example that you posted, but I need help with a slight variation.

When requiring validation for a field, you make a data property for each field name. But what if I wanted to make the naming dynamic? (e.g. the template is the same for all of them, but the name of each one is different - Name, Email, Phone, etc...and it's dependent on whatever the user chooses, so I don't know ahead of time what those names are). How would I instantiate my data? The example currently has it as:
data: { formstate: {}, model: { name: '', email: '', phone: '', department: null, comments: '', notValidated: '' } },

but I wanted to make something more along the lines of:
data: { formstate: {}, model: { input: '', } },
where "input" can be any number of names.

I tried setting input as an empty array and then changing all the input "name" directives to "input", but that didn't work. Everything I typed something in one field, all the fields would populate with the same content.

Sorry if this question is long >.< I really want to use this plugin and I hope you are able to help! :)

[fergaldoyle]

For reactive data you need to either pre-define properties or use Vue.set.

If your form is dynamic, i assume there's a property which holds the input name? Maybe you could save the model to that same property? e.g.

formInputs : [{
  name: 'Email',
  type: 'email',
  model: ''
}, {
  name: 'Phone',
  type: 'tel',
  model: ''
}]

Then loop through the inputs

<validate v-for="input in formInputs ">
   <span>{{input.name}}</span>
   <input v-model="input.model" :name="input.name" :type="input.type"/>
</validate>

[brandonn1231]

Ok thanks, I ended up doing something similar to that. But now I'm running into a problem when I try implementing the validation in a child component.

parent component

<template>
  <div id="app" class="container">
    <vue-form :state="formstate" v-model="formstate" @submit.prevent="onSubmit">
      <div v-for="dat in formDat">
        <p v-if="dat.type === 'question'">
         <app-question :formstate="formstate" :name="dat.id" :label="dat.label" :placeholder="dat.placeholder" :mapsTo="dat.mapsTo" :required="dat.required"></app-question>
        </p>
      </div>
    </vue-form>
  </div>
</template>

<script>
export default {
  data() {
    formstate: {},
    model: result,                 //where result = { 1: '', 2: '', 3: '' }
  }
},
methods ...
</script>

child component

<template>
  <div class="col-sm-12 question"> 
    <validate auto-label class="form-group required-field" :class="fieldClassName(formstate['1'])">
      <label>{{label}}</label>
      <input type="text" :name="name" class="form-control" required v-model.lazy="model" :mapsTo="mapsTo">
      <field-messages :name="name" show="$touched || $submitted" class="">
        <div>Success!</div>
        <div slot="required">Name is a required field</div>
      </field-messages>
    </validate>
  </div>
</template>

<script>
  export default {
    props: ['label', 'placeholder', 'required', 'mapsTo', 'model', 'name', 'formstate']
  }
</script>

but nothing is showing up. Am I doing something wrong with passing down the props?

[fergaldoyle]

When validate is in a child component you need to pass formstate to it as it can't find it in the parent. I see you are passing formstate as a prop to app-question, so all you need to do is pass it through to validate and field-messages

e.g:

<template>
  <div class="col-sm-12 question"> 
    <validate :state="formstate" auto-label class="form-group required-field" :class="fieldClassName(formstate['1'])">
      <label>{{label}}</label>
      <input type="text" :name="name" class="form-control" required v-model.lazy="model" :mapsTo="mapsTo">
      <field-messages :state="formstate" :name="name" show="$touched || $submitted" class="">
        <div>Success!</div>
        <div slot="required">Name is a required field</div>
      </field-messages>
    </validate>
  </div>
</template>

[brandonn1231]

Awesome, it works now. Thanks so much for your help!