SHARE
TWEET

Untitled

a guest Oct 23rd, 2019 58 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <div class="section page FormPage">
  3.     <CustomInput
  4.       v-for="field of formFields"
  5.       ref="inputs"
  6.       :key="field.id"
  7.       v-bind="field.inputProps"
  8.       v-on="field.inputEvents"
  9.     />
  10.   </div>
  11. </template>
  12.  
  13. <script>
  14.   import CustomInput from 'components/CustomInput/CustomInput';
  15.   import changeCase from 'change-case';
  16.  
  17.   const FORM_FIELD_KEYS = [
  18.     'name',
  19.     'lastName',
  20.     'email',
  21.     'address',
  22.     'city',
  23.     'postalCode',
  24.     'province'
  25.   ];
  26.  
  27.   export default {
  28.     name       : 'FormPage',
  29.     components : { CustomInput },
  30.     props      : {
  31.       contentData : {
  32.         type     : Object,
  33.         required : true
  34.       }
  35.     },
  36.     data() {
  37.       return {
  38.         name       : 'Default Name',
  39.         lastName   : 'Default Last Name',
  40.         email      : 'default@example.com',
  41.         address    : '',
  42.         city       : '',
  43.         postalCode : '',
  44.         province   : ''
  45.       };
  46.     },
  47.     computed : {
  48.       entryID() {
  49.         return this.$_get(this.contentData, 'sys.contentType.id');
  50.       },
  51.       formFields() {
  52.         return FORM_FIELD_KEYS.map((fieldName) => {
  53.           const requiredKey = `${fieldName}Required`;
  54.           const id = this.$_get(this.contentData[fieldName], 'sys.id', '');
  55.           const label = this.$_get(this.contentData[fieldName], 'name', '');
  56.           return {
  57.             id,
  58.             required   : this.contentData[requiredKey],
  59.             inputProps : {
  60.               label,
  61.               name : fieldName,
  62.               type : fieldName === 'email' ? 'email' : 'text',
  63.               // Value from data is passed as value, using a dynamic key
  64.               value : this[fieldName],
  65.               class : [
  66.                 'FormPage__custom-input',
  67.                 `FormPage__custom-input--${changeCase.paramCase(fieldName)}`
  68.               ],
  69.               inputAttributes : {
  70.                 required : this.contentData[requiredKey],
  71.                 form     : this.entryID
  72.               }
  73.             },
  74.             inputEvents : {
  75.               // CustomInput value change update handler
  76.               'update:value' : this.handleInputUpdate
  77.             }
  78.           };
  79.         });
  80.       }
  81.     },
  82.     methods : {
  83.       // CustomInput value update handler
  84.       handleInputUpdate({ value, name }) {
  85.         // Using the value of name, we can dynamically update properties inside of data
  86.         this[name] = value;
  87.       }
  88.     }
  89.   };
  90. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top