[Vuejs]-Pass select option value to input field using VueJS

by

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

});

👤M.Boukhlouf

1👍

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

👤Daniel

Leave a comment