My goal is to dynamically manipulate input fields in real-time.
I found a helpful solution at , which successfully adds and removes fields as needed. However, when attempting to save the input values to the database, the functionality breaks.
Here is the component code I am using:
<div class="form-group" v-for="(input,k) in inputs" :key="k">
<input type="text" class="form-control" v-model="input.name" />
<input type="text" class="form-control" v-model="input.party" />
<span>
<i
class="fas fa-minus-circle"
@click="remove(k)"
v-show="k || ( !k && inputs.length > 1)"
></i>
<i
class="fas fa-plus-circle"
@click="add(k)"
v-show="k == inputs.length-1"
></i>
</span>
</div>
<button @click="addCandidate">
Submit
</button>
<script>
export default {
data() {
return {
inputs: [
{
name: "",
party: ""
}
]
};
},
methods: {
add(index) {
this.inputs.push({ name: "", party: "" });
},
remove(index) {
this.inputs.splice(index, 1);
},
addCandidate() {
axios
.post("/candidates", this.inputs)
.then(response => {})
.catch(error => {});
}
}
};
</script>
Upon testing, I consistently encounter a 422 error indicating that the input field is empty.