vuejs append different input on change

Question

I have select option where i select type of inputs, and i want to show different type of inputs based on selected option.

Example

select input -> show input fields
select textarea -> show text areas
select bolean -> show radio buttons

Code

Here is where i select my input types,

Notice: @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

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.

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

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

<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>

ideas?

Qonvex620 · Accepted Answer · 2020-01-21 07:54:02Z

1

In your div tag. put already the input you have to set and attached a condition on it, see code below

<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>

answered Jan 21, 2020 at 7:54

Qonvex620

3,9801 gold badge12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mafortis Over a year ago

thanks, but it couldn't read the index.type and stopped view to be render so i made 3 different div's like <div v-if="selecteVariation == 'input'"> with different values and in each one i Placed separate input types.

Qonvex620 Over a year ago

why you can't read the index.type ? did you declare it in the data ?

mafortis Over a year ago

no as they are all under same loop <div v-for="(index, a) in variationParents" :key="a"> it didn't need to be declare i guess.

mafortis Over a year ago

Hi, would you mind check this out? stackoverflow.com/questions/59870746/… i'm sure you're able to help with it, you already did it it's just need to get 1 more value :) appreciate it.

Radonirina Maminiaina · Accepted Answer · 2020-01-21 07:42:56Z

0

Instead of passing the value in inputType, you can use directly 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)
    }
  },
}

answered Jan 21, 2020 at 7:42

Radonirina Maminiaina

7,0144 gold badges36 silver badges63 bronze badges

1 Comment

mafortis Over a year ago

thanks but that's not my issue, my issue is input types (html fields)

mafortis · Accepted Answer · 2020-01-21 08:07:23Z

0

Solved

I made 3 different div's, like <div v-if="selecteVariation == 'input'"> with different values and in each one i Placed separate input types.

code

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

Hope it can help others.

answered Jan 21, 2020 at 8:07

mafortis

7,18826 gold badges154 silver badges330 bronze badges

Comments

Khairul Habib · Accepted Answer · 2020-01-21 08:07:49Z

you have the v-model already in the select options, why did you need @click function handler while you may do that thing like this and also can free your code from 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>

and set in

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

so initially the input will not showing any type of input.

Collectives™ on Stack Overflow

vuejs append different input on change

Example

Code

4 Answers 4

4 Comments

1 Comment

Solved

code

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Example

Code

4 Answers 4

4 Comments

1 Comment

Solved

code

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related