title: vuejs append different input on change
body: <p>I have select option where i select type of inputs, and i want to show different type of inputs based on selected option.</p>
  
  <h3>Example</h3>
  
  <ol>
  <li>select <code>input</code> -> show input fields</li>
  <li>select <code>textarea</code> -> show text areas</li>
  <li>select <code>bolean</code> -> show radio buttons</li>
  </ol>
  
  <h1>Code</h1>
  
  <p>Here is where i select my input types,</p>
  
  <p>Notice: <code>@change="inputType"</code></p>
  
  <pre><code>&lt;div v-for="(index, a) in variationParents" :key="a"&gt;
  &lt;el-input placeholder="Please input your variation name" v-model="index.name" class="input-with-select"&gt;
      &lt;el-select @change="inputType" v-model="index.type" slot="prepend" placeholder="Select"&gt;
          &lt;el-option label="Text" value="input"&gt;&lt;/el-option&gt;
          &lt;el-option label="Text Area" value="textarea"&gt;&lt;/el-option&gt;
          &lt;el-option label="Boolean" value="boolean"&gt;&lt;/el-option&gt;
      &lt;/el-select&gt;
  &lt;/el-input&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>Script</code></p>
  
  <blockquote>
    <p>Note: I am aware that i am using jQuery instead of vueJs in this
    function but it was only to test and make sure that i'm getting the
    right value out of my select options.</p>
  </blockquote>
  
  <pre><code>methods: {
    inputType: function(value) {
      $('.show').html('')
      if(value == 'input') {
        $('.show').html(value)
      } else if(value == 'textarea') {
        $('.show').html(value)
      } else if(value == 'boolean') {
        $('.show').html(value)
      }
    },
  }
  </code></pre>
  
  <p><code>HTML</code></p>
  
  <p>This is where different type of inputs has to be returned, currently it has static input field only, somehow it should be related to function if statements and print related type of inputs</p>
  
  <pre><code>&lt;div class="show"&gt;&lt;/div&gt;  // this DIV was only to test my function values
  &lt;el-col :span="9" style="margin-top:15px;display:none;"&gt;
      &lt;div v-for="(indexx, b) in variationChilds" :key="b"&gt;
          &lt;!-- child's --&gt;
          &lt;el-input v-model="indexx.name" placeholder="Please input your variation value" class="input-with-select"&gt;
              &lt;el-button slot="append"  @click="addChild(b)"  type="success" icon="el-icon-plus"&gt;&lt;/el-button&gt;
              &lt;el-button slot="append" @click="removeChild(b)" v-show="b || ( !b == variationChilds.lenghth &gt; 1)" type="danger" icon="el-icon-delete"&gt;&lt;/el-button&gt;
          &lt;/el-input&gt;
      &lt;/div&gt;
  &lt;/el-col&gt;
  </code></pre>
  
  <p>ideas?</p>