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

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

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

Modify the structure of the JSON string

Using AngularJS, you can display repeated elements in a single textarea by utilizing

The use of custom loaders alongside ts-node allows for more flexibility

I need to fetch data from mongoDB by allowing the user to input a name into a search field, and then retrieve all documents that correspond to that search term

Step-by-step guide to implementing a month and year date-picker in Mozilla Firefox

What is the method to retrieve the selected value from a drop-down menu that is connected to JSON keys?

Remove background image when input form field is in focus

What is the best way to interact with Redis without using any external modules?

Issue with AngularJS directives - encountering a problem with the property 'compile' being undefined

Unlock the potential of Vue custom props within the asyncData function in your nuxtjs project!

AngularJS Toggle Directive tutorial: Building a toggle directive in Angular

Mysterious occurrences always seem to unfold whenever I implement passport for user authentication in my Node.js and Express applications

Tips for optimizing performance by preloading external CSS and JavaScript files from a third-party source in a ReactJS project with webpack

Husky 5: The Ultimate Gitignore Manager

What is the best way to create a Laravel object for use in JavaScript in a Laravel Blade?

Best practices for locating unique symbols within a string and organizing them into an array using JavaScript

Tips on setting a singular optional parameter value while invoking a function

Utilize the Google Drive API to easily upload an Excel file

Reacting with Angulatory: Response heads are not being transferred in applications

What is the proper method for utilizing assignments instead of simply assigning values directly?