Pass select option value to input field using VueJS

Question

I'm trying to grab the value from a select option and pass it to the input field name so I can create different input fields on button click.

So far I have an array of input fields but I'm not sure how to grab the select option value and output this within the input name field, resetting it each button click.

Markup

  <div id="app">

    <ul>
      <li v-for="(input, index) in inputs">
        <input type="text" v-model="input.one">
        <button @click="deleteRow(index)">Delete</button>
      </li>
    </ul>

    <select v-model="inputType">
      <option selected="selected">Select a field to add</option>
      <option value="text">Text</option>
      <option value="file">File</option>
      <option value="email">email</option>
    </select>
    <button @click="addRow">Add row</button>

  </div>

VueJS

const app = new Vue({

  el: '#app',

  data: {
    inputs: []
  },

  methods: {
    addRow() {
      this.inputs.push({
        one: ''
      })
    },
    deleteRow(index) {
      this.inputs.splice(index,1)
    }
  }

})

JSFiddle - https://jsfiddle.net/u2r1fpu4/

You can watch for changes to inputType and react to that. That's how you grab what's been selected. On click, simply do the action (add an input) and then set the inputType to null. Also, define it in your data(). — N.B.
– N.B., Commented Apr 5, 2018 at 19:53

M.Boukhlouf · Accepted Answer · 2018-04-05 21:23:01Z

1

As you have binded the value of the select input to inputType, just use the inputType variable.

  <div id="app">

<ul>
  <li v-for="(input, index) in inputs">
    <input v-bind:type="input.type">
    <button @click="deleteRow(index)">Delete</button>
  </li>
</ul>

<select v-model="inputType">
  <option selected="selected">Select a field to add</option>
  <option value="text">Text</option>
  <option value="file">File</option>
  <option value="email">email</option>
</select>
<button @click="addRow">Add row</button>

const app = new Vue({

  el: '#app',

  data: 
  {
    inputs: [],
  },

  methods: {
    addRow() {
      this.inputs.push({
        type: this.inputType
      })
    },
    deleteRow(index) {
      this.inputs.splice(index,1)
    }
  }

});

edited Apr 5, 2018 at 21:23

answered Apr 5, 2018 at 21:02

M.Boukhlouf

3132 silver badges10 bronze badges

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

3 Comments

archvist Over a year ago

Aha correct, but that binds the option value to the input value instead of the name attribute of the field.

archvist Over a year ago

I wish to bind the option value inputType to the name attribute of an input html tag e.g <input type="inputType" /> I under stand I probably need a v-bind:name here.

M.Boukhlouf Over a year ago

I have edited my answer with what I believe is correct, I've tried it and it's working, the added input will be of the type selected. You bind the type of the input (v-bind:type).

Daniel · Accepted Answer · 2018-04-05 21:27:31Z

I'm not sure what you're trying to accomplish, so I'm just taking a guess here

const app = new Vue({
  
  el: '#app',
  
  data: {
    inputs: [],
    selection: ""
  },
  
  methods: {
    addRow(selection) {
      this.inputs.push({
        type:selection, 
        one: ''
      })
    },
    deleteRow(index) {
      this.inputs.splice(index,1)
    }
  }
  
})

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div id="app">
    
    <ul>
      <li v-for="(input, index) in inputs">
        <input v-if="input.type === 'text'" type="text" v-model="input.one">
        <input v-else-if="input.type === 'file'" type="file" v-model="input.one">
        <input v-else-if="input.type === 'email'" type="email" v-model="input.one">
        <button @click="deleteRow(index)">Delete</button>
        {{input.type}}
      </li>
    </ul>
    
    <select v-model="selection">
      <option value="" >Select a field to add</option>
      <option value="text">Text</option>
      <option value="file">File</option>
      <option value="email">email</option>
    </select>
    <button @click="addRow(selection)">Add row</button>
    
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
  
</body>
</html>

note that you can't do <input :type="input.type" v-model="input.one"> and would need to have a set of v-if/v-else-if instead

Collectives™ on Stack Overflow

Pass select option value to input field using VueJS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related