Form Component Examples With V-Model

• Jump to Code

Code

Template

<div>
  <div class="row">
    <div class="col-12">
      <div class="mb-5">
        <h4>Textbox</h4>
        <rs-form-input type="text" v-model="obj.text"></rs-form-input>
      </div>

      <div class="mb-5">
        <h4>Single favourite with bool</h4>
        <rs-favorite v-model="obj.favorite" label="Favourite"></rs-favorite>
      </div>

      <div class="mb-5">
        <h4>Multiple chk with object array</h4>
        <rs-form-checkbox
          v-model="obj.checkedVals"
          v-for="value in chkVals" 
          :key="value.id" 
          :id="value.id"
          :value="value"
          :label="value.name"
        >
        </rs-form-checkbox>
      </div>

      <div class="mb-5">
        <h4>Single chk with boolean model</h4>
        <rs-form-checkbox id="3" v-model="obj.chkSingle" label="Single Checkbox"></rs-form-checkbox>
      </div>

      <div class="mb-5">
        <h4>Single chk with string model</h4>
        <rs-form-checkbox 
          id="4" 
          v-model="obj.chkSingleString" 
          :true-value="'yes'" 
          :false-value="'no'" 
          label="Single Checkbox String Value">
        </rs-form-checkbox>
      </div>

      <div class="mb-5">
        <h4>Multiple switch with object array</h4>
        <rs-form-switch
          v-model="obj.switchVals"
          v-for="value in chkVals" 
          :key="value.id" 
          :id="value.id"
          :value="value"
          :label="value.name"
        >
        </rs-form-switch>
      </div>

      <div class="mb-5">
        <h4>Single switch with boolean model</h4>
        <rs-form-switch :id="`switch_single`" v-model="obj.switchSingle" label="Single Switch"></rs-form-switch>
      </div>

      <div class="mb-5">
        <h4>Single switch with string model</h4>
        <rs-form-switch 
          :id="`switch_single_string`" 
          v-model="obj.switchSingleString" 
          label="Single Switch"
          true-value="enabled"
          false-value="disabled"
        > 
        </rs-form-switch>
      </div>

      <div class="mb-5">
        <h4>Datepicker</h4>
        <rs-form-date-picker id="3" v-model="obj.date" mode="single"></rs-form-date-picker>
      </div>

      <div class="mb-5">
        <h4>Radio Boolean</h4>
        <rs-form-radio :id="`radio-0`" v-model="obj.radioSingle" :value="0" label="Single Value 0"></rs-form-radio>
        <rs-form-radio :id="`radio-1`" v-model="obj.radioSingle" :value="1" label="Single Value 1"></rs-form-radio>
      </div>

      <div class="mb-5">
        <h4>Radio Object</h4>
        <rs-form-radio :id="`radio-obj-null`" :value="null" v-model="obj.radioObj" label="Null Object Value"></rs-form-radio>
        <rs-form-radio :id="`radio-obj-${chkVals[0].id}`" :value="chkVals[0]" v-model="obj.radioObj" label="Object Value"></rs-form-radio>
      </div>

      <div class="mb-5">
        <h4>Select</h4>
        <rs-form-select :id="`select`" v-model="obj.selectOption" :options="selectOptions">
        </rs-form-select>
      </div>

      <div class="mb-5">
        <h4>Spin Button</h4>
        <rs-form-spinbutton v-model="obj.spinValue"></rs-form-spinbutton>
      </div>

      <div class="mb-5">
        <h4>Tags</h4>
        <rs-form-tags v-model="obj.tags"></rs-form-tags>
      </div>

      <div class="mb-5">
        <h4>CKEditor</h4>
        <rs-form-ckeditor-textbox v-model="obj.textarea"></rs-form-ckeditor-textbox>
      </div>
    </div>
  </div>


  <div class="fixed-right">
    <pre>{{ JSON.stringify(obj, null, 2) }}</pre>
  </div>
</div>

Script

import Vue from 'vue';
import { ISelectOption } from 'rs-utilities';

export default Vue.extend({
  data() {
    return {
      obj: {
        text: 'Some text....',
        favorite: true,
        chkSingle: false,
        chkSingleString: 'no',
        textarea: '',
        checkedVals: [
          {
            id: 1,
            name: 'Alex'
          },
        ],
        switchSingle: true,
        switchSingleString: 'enabled',
        switchVals: [
          {
            id: 2,
            name: 'Matt'
          },
        ],
        date: new Date(),
        radioSingle: 0,
        radioObj: null,
        selectOption: null as any,
        spinValue: 5,
        tags: ['Alex', 'Matt', 'Henry', 'Mike'],
      },

      chkVals: [
        {
          id: 1,
          name: 'Alex'
        },
        {
          id: 2,
          name: 'Matt'
        },
      ],
    }
  },
  mounted() {
    this.obj.selectOption = this.chkVals[0];
  },
  watch: {
    obj: {
      deep: true,
      immediate: false,
      handler() {
        console.log(this.obj);
      }
    }
  },
  computed: {
    selectOptions(): ISelectOption[] {
      return [
        // Add `null` option
        ...[{ value: null, text: 'No option selected' } as ISelectOption],

        // Reformat chkVals to a list of `ISelectOpion`
        ...(Array.from(this.chkVals, (item: any) => ({

          // The original item is the value now.
          value: item,

          // Set that original item value's display property.
          text: item.name,
        } as ISelectOption)))
      ]
    }
  }
});