I have a form that let users enter multiples input of a same field, so I set the value as an array but I can't submit the form successfully.
Error 1 : The value will always be 'undefined', I think that is because of the way that I set the array is incorrect.
Error 2 : The system can only get 1 result even thought I submit multiple input.
I only show the code that I set the array and how to submit it and not the whole ajax because it will be too many code to show.
HTML:
<div class="form-group row" id="id-inputAddDomain" v-for="(input, index) in addDomain" :key="index">
<label class="col-sm-3 col-form-label">Domain</label>
<div class="col-sm-9" >
<input type="text" align="middle" v-model="input.addDomain" class="form-control input-lg">
<a @click="addField()"><i class="fa fa-plus-circle" ></i></a>
<a @click="removeField(index)"><i class="fa fa-remove" style="color:red"></i></a>
</div>
</div>
<button type="button" class="btn btn-default btn-submit" @click="addCompanySetting">submit</button>
vuejs:
<script>
export default {
data() {
return {
addDomain: [{domain:""}],
},
methods : {
addCompanySetting(){
var VUE = this
var postExtraData = '';
var input = _.findIndex(this.addDomain.data, { 'domain': this.input.domain });
var postData = '&domain='+this.addDomain[input]';
var valid = this.validator();//validation to check the input is not empty
if(valid){
$.ajax({
url:baseUrl+'/agency/account/prefer-ma',
type: 'POST',
data: postData,
dataType: 'json'
}).done(function (data){
if(data.result == "1"){
VUE.inputAddPrefix = '-';
VUE.addDomain = null;
$('#addApiSettingModal').modal('toggle');
}
},
},
addField() {
this.addDomain.push({domain:""});
},
removeField(index) {
this.addDomain.splice(index, 1);
},
},
I have refactored your code and enhanced it a little bit, I've made a working sandbox for you. Sandbox link
<template>
<div id="app">
<div
class="form-group row"
id="id-inputAddDomain"
v-for="(input, index) in addDomain"
:key="index"
>
<label class="col-sm-3 col-form-label">Domain</label>
<div class="col-sm-9">
<input
type="text"
align="middle"
v-model="input.domain"
class="form-control"
/>
<a @click="addField()" class="btn btn-info"
><i class="fa fa-plus-circle"></i
></a>
<a @click="removeField(index)" class="btn btn-danger"
><i class="fa fa-minus" style="color: white"></i
></a>
</div>
</div>
<button
type="button"
class="btn btn-success btn-submit"
@click="addCompanySetting"
>
submit
</button>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "App",
data() {
return {
addDomain: [{ domain: "" }],
baseUrl: "",
};
},
methods: {
addCompanySetting() {
console.log(this.addDomain);
axios
.post(this.baseUrl + "/agency/account/prefer-ma", this.addDomain)
.then((response) => {
if (response.data.result === "1") {
this.inputAddPrefix = "-";
this.addDomain = null;
$("#addApiSettingModal").modal("toggle");
}
});
},
addField() {
this.addDomain.push({ domain: "" });
},
removeField(index) {
this.addDomain.splice(index, 1);
},
},
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>Observations :
addDomain property in your input objet. Hence it should be v-model="input.domain" instead of v-model="input.addDomain".addDomain is an array. You don't have any data property in addDomain.input property in our data. Hence, this.input.domain will return undefined.Working Demo :
new Vue({
el: "#app",
data: {
addDomain: [{
domain: 'www.abc.com'
}, {
domain: 'www.def.com'
}, {
domain: 'www.ghi.com'
}, {
domain: 'www.jkl.com'
}, {
domain: 'www.mno.com'
}]
},
methods: {
addCompanySetting() {
// Add your logic here
console.log('input domains', this.addDomain);
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="form-group row" id="id-inputAddDomain" v-for="(input, index) in addDomain" :key="index">
<label class="col-sm-3 col-form-label">Domain</label>
<div class="col-sm-9">
<input type="text" align="middle" v-model="input.domain" class="form-control input-lg"/>
<a @click="addField()"><i class="fa fa-plus-circle" ></i></a>
<a @click="removeField(index)"><i class="fa fa-remove" style="color:red"></i></a>
</div>
</div>
<button type="button" class="btn btn-default btn-submit" @click="addCompanySetting">submit</button>
</div>