# Conditional Render

<template>
  <div>
    <el-select :style="selectStyle" v-model="uiLib">
      <el-option
        v-for="item in uiLibs"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <Former :ui="uiLib" :model="model" :schema="schema" :options="options"></Former>
  </div>
</template>

<script>
export default {
  components: {
    Former: window.Former
  },

  data: () => ({
    selectStyle: {
      marginBottom: '20px'
    },
    uiLib: 'element-ui',
    uiLibs: [
      { value: 'element-ui', label: 'Element UI' },
      { value: 'iview', label: 'iView' }
    ],
    model: { name: '', sex: 0 },
    schema: [
      {
        label: 'Name: ',
        name: 'name',
        type: 'input'
      }, {
        label: 'Sex: ',
        name: 'sex',
        type: 'radio',
        options: [
          { value: 0, name: 'female' },
          { value: 1, name:'male' }
        ],
        when: (model) => !!model.name
      }
    ],
    options: { labelWidth: '80px', labelPosition: 'left' }
  })
}
</script>