vuejs добавить другой ввод при изменении

Question

У меня есть опция выбора, где я выбираю тип входов, и я хочу показать другой тип входов на основе выбранной опции.

Пример

1. выберите input -> показать поля ввода
2. выбрать textarea -> показать текстовые области
3. выбрать bolean -> показать переключатели

код

Здесь где я выбираю типы ввода,

Примечание: @change="inputType"

<div v-for="(index, a) in variationParents" :key="a">
<el-input placeholder="Please input your variation name" v-model="index.name" class="input-with-select">
    <el-select @change="inputType" v-model="index.type" slot="prepend" placeholder="Select">
        <el-option label="Text" value="input"></el-option>
        <el-option label="Text Area" value="textarea"></el-option>
        <el-option label="Boolean" value="boolean"></el-option>
    </el-select>
</el-input>
</div>

Script

Примечание: я знаю, что использую jQuery вместо vueJs в этой функции, но это было только для проверки и проверки того, что я получаю правильное значение из моих опций выбора.

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)
    }
  },
}

HTML

Это то место, где должны быть возвращены различные типы входных данных, в настоящее время оно имеет только поле ввода c, так или иначе это должно быть связано с функцией if, если операторы и печатные данные относятся к типу входных данных

<div class="show"></div>  // this DIV was only to test my function values
<el-col :span="9" style="margin-top:15px;display:none;">
    <div v-for="(indexx, b) in variationChilds" :key="b">
        <!-- child's -->
        <el-input v-model="indexx.name" placeholder="Please input your variation value" class="input-with-select">
            <el-button slot="append"  @click="addChild(b)"  type="success" icon="el-icon-plus"></el-button>
            <el-button slot="append" @click="removeChild(b)" v-show="b || ( !b == variationChilds.lenghth > 1)" type="danger" icon="el-icon-delete"></el-button>
        </el-input>
    </div>
</el-col>

идеи?

Answer 1

В вашем теге div. поместите уже вход, который вы должны установить, и прикрепите к нему условие, см. код ниже

<div class="show">
   <input type="text" v-if="index.type == 'input'">
   <textarea v-if="index.type == 'textarea'">
   <input type="radio" v-if="index.type == 'boolean'">
</div> 

Answer 2

у вас уже есть v-модель в опциях выбора, зачем вам нужен обработчик функции @click, пока вы можете делать это, как это, а также можете освободить свой код от jquery ..

<el-input placeholder="Please input your variation name" v-model="index.name" class="input-with-select">
    <el-select v-model="index.type" slot="prepend" placeholder="Select">
        <el-option label="Text" value="input"></el-option>
        <el-option label="Text Area" value="textarea"></el-option>
        <el-option label="Boolean" value="boolean"></el-option>
    </el-select>
</el-input>
<div>
   <input type="text" v-if="index.type == 'input'">
   <textarea v-if="index.type == 'textarea'">
   <input type="radio" v-if="index.type == 'boolean'">
</div> 

и задайте

data() {
  return{
    index.type = ''
  }
}

, поэтому изначально на входе не будет отображаться тип ввода.

Answer 3

Решено

Я сделал 3 разных деления, как <div v-if="selecteVariation == 'input'"> с разными значениями и в каждом из них i Размещены отдельные типы ввода.

код

data(){
  return {
     selecteVariation: '',
  }
},
methods: {
  inputType: function(value) {
     this.selecteVariation = value
  }
}

Надеюсь, что это может помочь другим.

Answer 4

Вместо передачи значения в inputType, вы можете использовать напрямую this.index.type.

methods: {
  inputType: function() {
    const value = this.index.type;
    $('.show').html('')
    if(value == 'input') {
      $('.show').html(value)
    } else if(value == 'textarea') {
      $('.show').html(value)
    } else if(value == 'boolean') {
      $('.show').html(value)
    }
  },
}