Vue-form-generator: [Vue-warn] when using custom fields

Created on 24 Aug 2017 · 4Comments · Source: vue-generators/vue-form-generator

Sampurasun!

Trying to create custom fields like this, it works perfectly. But, when I am looking on 'inspect element --> console' this [Vue-warn] was appear:

[Vue warn]: Property or method "formatValueToModel" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

found in

---> <FieldBulmaInput> at /var/www/vuejs/next-level-vuejs/client/helpers/custom-form-generator/fieldCustomInput.vue
       <VueFormGenerator>
         <TabContent>
           ...

It's happen when create 'input text' and 'textarea'. This is an example code of custom fields fieldCustomInput.vue:

<template>
<div class="field">
  <label class="label">{{ schema.customLabel }}</label>
  <div class="control">
    <input 
    class="input is-medium" 
    type="text"
    v-model="value"
    :disabled="disabled"
    :maxlength="schema.maxlength"
    :placeholder="schema.placeholder"
    :readonly="schema.readonly">
  </div>
  <br>
</div>

</template>

<script>
  import { abstractField } from 'vue-form-generator'

  export default {
    mixins: [ abstractField ]
  }
</script>

<style lang="scss" scoped>
.label {
    font-size: 1.5rem;
}
</style>

And I tried to defined 'formatValueToModel' in tag

All 4 comments

It is not your fault, I think.
In abstract.js, there is a check to see if formatValueToModel exist as a method. This is a way for custom field developer to format value how they want, if needed.
I think that check trigger [vue-warn], but it is not a problem. In production, this message should not appear.
I'm going to look into it.
Edit: can you post a fiddle ? I can't get the message to appear.

lionel-bijaoui on 24 Aug 2017

I have the same issue. Trying to use datePicker from vue-strap.
Whole field component code:

<template>
  <datepicker v-model="value" :disabled-days-of-Week="disabled" :placeholder="schema.placeholder">
  </datepicker>
</template>
<script>
import { abstractField } from 'vue-form-generator'
import { datepicker } from 'vue-strap'
export default {
  components: {
    datepicker,
  },
  mixins: [ abstractField ],
}
</script>

Nothing special and I see the warning too.