Pass select option value to input field using VueJS

0
votes

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/

2
javascriptvue.jsvuejs2
Can you reproduce your attempt in a fiddle? – Phiter
Updating sorry missed that bit – archvist
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.

2 Answers

1
votes

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

});

1
votes

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