Vue

by Umesh Patil

HTML

<div id="app">
  <h2>Todos:</h2>
  
  <div v-for="(input, index) in inputs" :key="index">
      <input type="text" v-model="index.value" :value="index.value">
    <a href="javascript: void(0)" @click="addInput">+</a>
    <a href="javascript: void(0)" @click="removeInput(index)">-</a>
  </div>
  <button @click="sendApi">
    sendApi
  </button>
  <div>
    {{inputs}}
  
    Array for API
    {{allValues}}  
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
  	inputs:[
    	{
      	label: 'testing',
      	Value: ''
      }
    ],
    allValues:[]
  },
  methods: {
  	addInput(){
    	this.inputs.push({
          label: 'testing',
          Value: ''
      })
    },
    removeInput(index){
    	this.inputs.splice(index, 1)
    },
    sendApi(){
    	let valueArr = []
    	this.inputs.forEach((item) => {
      	valueArr.push(item.value);
      })
      this.allValues = valueArr
      
    }
  }
})