Using Vue.js to dynamically append varying inputs upon user interaction

Question

Using Vue.js to dynamically append varying inputs upon user interaction

When I select an option, I want to display different types of inputs based on the selected option.

For Example:

Select input -> show input fields
Select textarea -> show text areas
Select boolean -> show radio buttons

The Code

This is where I choose my input types,

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

The Script

Note: I am using jQuery instead of vueJs for this function just to test and make sure that I'm getting the correct value from 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)
    }
  },
}

The HTML Section

This section should return different types of inputs, currently it only has a static input field. It should be linked to the function's if statements to print the related type of inputs.

<div class="show"></div>  // This DIV was used solely for testing 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.length > 1)" type="danger" icon="el-icon-delete"></el-button>
        </el-input>
    </div>
</el-col>

Any thoughts or suggestions?

javascript vue.js vuejs2

Answer 1

Answer №1

Ensure to include the necessary input elements within your div tag along with conditions based on specific criteria, as demonstrated in the code snippet below

<div class="display">
   <input type="text" v-if="data.type == 'text'">
   <textarea v-if="data.type == 'textarea'">
   <input type="checkbox" v-if="data.type == 'boolean'">
</div>

Answer 2

Ensure to include the necessary input elements within your div tag along with conditions based on specific criteria, as demonstrated in the code snippet below

<div class="display">
   <input type="text" v-if="data.type == 'text'">
   <textarea v-if="data.type == 'textarea'">
   <input type="checkbox" v-if="data.type == 'boolean'">
</div>

Answer 3

Answer №2

Opt for utilizing this.index.type directly instead of passing the value in inputType.

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

Answer 4

Opt for utilizing this.index.type directly instead of passing the value in inputType.

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

Answer 5

Answer №3

Issue Resolved

To address the problem, I utilized 3 separate div elements with different conditions specified within them, such as

<div v-if="selecteVariation == 'input'">

, each containing distinct input types.

Code snippet

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

https://i.sstatic.net/9DYxl.png

I trust that this solution may prove beneficial to others facing similar challenges.

Answer 6

Issue Resolved

To address the problem, I utilized 3 separate div elements with different conditions specified within them, such as

<div v-if="selecteVariation == 'input'">

, each containing distinct input types.

Code snippet

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

https://i.sstatic.net/9DYxl.png

I trust that this solution may prove beneficial to others facing similar challenges.

Answer 7

Answer №4

Why use an @click function handler when the v-model is already present in the select options? You can simplify your code and eliminate the need for jQuery by structuring it like this:

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

You can then initialize index.type inside the data() method:

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

This way, the input field will initially not display any specific type of input.

Answer 8

Why use an @click function handler when the v-model is already present in the select options? You can simplify your code and eliminate the need for jQuery by structuring it like this:

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

You can then initialize index.type inside the data() method:

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

This way, the input field will initially not display any specific type of input.

Using Vue.js to dynamically append varying inputs upon user interaction

For Example:

The Code

Answer №1

Answer №2

Answer №3

Issue Resolved

Code snippet

Answer №4

Similar questions

Passing a Typescript object as a parameter in a function call

Scrolling through a lengthy table without affecting the overall window scroll

Curious as to why JavaScript restricts the use of two variables entering at the same time

Creating a new variable and then trying to access its value (which has not been defined)

Postman's ability to capture elements that meet specific criteria set by another element

Utilizing a Single Background Image Across Several Div Elements

What is the best way to utilize a promise for a singular variable?

Tips for integrating external JavaScript libraries and stylesheets into a widget

What methods should I use to modify the upcoming array of objects?

Comparing Fetch and Axios: Which is Better?

Guide on how to have two controllers execute identical tasks in Angular while modifying the appearance of the website

JavaScript: the battle between anonymous and direct function invocation

Can you please highlight parts of the text and provide dialogue with additional information?

Having trouble with uploading files through axios in VueJS 2 and Strapi

VueJS: The background image is mistakenly displayed in all sibling components instead of only the component where the image was uploaded

Struggling with smoothly transitioning an image into view using CSS and JavaScript

transferring data from JavaScript to PHP variables

Encoding a two-dimensional array into JSON format

How do prototype, the $.extend method, and the concept of "return this" all connect with each other?

How can I prevent a browser from allowing users to select an image tag?