Vue Playground

Application with Vue.js

by James Doyle

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.8.6/vue.min.js"></script>
<div id="demo">
    <MyForm :schema="schema" />
</div>

JavaScript

const MyForm = () => ({
  name: 'MyForm',
  props: ['schema'],
  render(createElement) {
    return createElement('div', {}, this.schema.map((detail) => {
      const options = detail.options.map(({ value, label }) => {
        return createElement(
          'option',
          {
            attrs: {
              value,
            },
            domProps: {
              innerText: label,
            },
          }
        );
      });

    	return createElement(detail.tag, {
      	attrs: {
          name: detail.name,
          id: detail.name,
        }
      }, options);
    }));
  }
});

Vue.component('MyForm', MyForm);

new Vue({
    el: '#demo',
    data: {
        schema: [
        	{
          	tag: 'select',
            name: 'my-select',
            options: [
              { value: '1', label: 'Radio One' },
              { value: '2', label: 'Radio Two' },
              { value: '3', label: 'Radio Three' },
            ],
          },
          {
          	tag: 'select',
            name: 'my-second-select',
            options: [
              { value: '1', label: 'Radio One' },
              { value: '2', label: 'Radio Two' },
              { value: '3', label: 'Radio Three' },
            ],
          }
        ]
    }
});