I have multiple input that I wish to pass into my form variable but the result is array into array which isn't what i need.
Samples
All parts are commented so you won't get confused.
This is what I have now:
array:2 [
"form" => array:10 [
"name" => "tjuhr"
"link_id" => 5
"description" => null
"position" => "Kabel Duct (tanah)"
"cable_id_id" => null
"images" => []
// this is the way currently my cores are returning but i need it changed.
"cores" => array:1 [
0 => array:2 [
0 => array:2 [
"old_core_id" => 3
"new_core_id" => 11
]
1 => array:2 [
"old_core_id" => 5
"new_core_id" => 20
]
]
]
"longitude" => "45"
"latitude" => "4"
"cable_id" => 2
]
// this part below is for testing purpose only (it has to be pushed into form.cores)
"cores" => array:2 [
0 => array:2 [
"old_core_id" => 3
"new_core_id" => 11
]
1 => array:2 [
"old_core_id" => 5
"new_core_id" => 20
]
]
]
This is what i'm looking for to have
array:2 [
"form" => array:10 [
"name" => "tjuhr"
"link_id" => 5
"description" => null
"position" => "Kabel Duct (tanah)"
"cable_id_id" => null
"images" => []
// this is how i need my selected ids return.
"cores" => array:4 [
0 => 3
1 => 11
2 => 5
3 => 20
]
"longitude" => "45"
"latitude" => "4"
"cable_id" => 2
]
]
Code
Template
<el-dialog title="Add New Titik Closure" :visible.sync="dialogFormVisible">
<el-form ref="form" :model="form" :label-width="formLabelWidth">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="Name">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="Link">
<el-select style="width: 100%;" filterable clearable v-model="form.link_id" placeholder="Select Link">
<el-option
v-for="link in links"
:key="link.id"
:label="link.site_name"
:value="link.id">
<span style="float: left">
{{ link.site_name }}
</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="Position">
<el-select v-model="form.position" style="width: 100%;" placeholder="Please select Kable Position">
<el-option
v-for="position in positions"
:key="position.value"
:label="position.label"
:value="position.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="Cable">
<el-select style="width: 100%;" filterable clearable v-model="form.cable_id" placeholder="Select Cable">
<el-option
v-for="cable in cables"
:key="cable.id"
:label="cable.name"
:value="cable.id">
<span style="float: left">
{{ cable.name }}
</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="Longitude">
<el-input v-model="form.longitude"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="Latitude">
<el-input v-model="form.latitude"></el-input>
</el-form-item>
</el-col>
</el-row>
<!-- add button for multiple input -->
<el-row :gutter="10">
<el-col :size="24">
<div v-for="(indexx, b) in variationChilds" :key="b">
<!-- child's -->
<el-col :span="6">
<el-form-item label="From Tube">
<el-select @change="fromTubeHandleChange" v-model="closureForm.fromTube" style="width: 100%;" placeholder="Please select Kable Position">
<el-option
v-for="tube in fromTube"
:key="tube.id"
:label="tube.name"
:value="tube.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="From Core">
<el-select style="width: 100%;" filterable clearable v-model="indexx.old_core_id" placeholder="Select From Core">
<el-option
v-for="core in fromCors"
:key="core.id"
:label="core.name"
:value="core.id">
<span style="float: left">
{{ core.name }}
</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="To Tube">
<el-select @change="toTubeHandleChange" style="width: 100%;" filterable clearable v-model="closureForm.toTube" placeholder="Select Cable">
<el-option
v-for="tubee in toTube"
:key="tubee.id"
:label="tubee.name"
:value="tubee.id">
<span style="float: left">
{{ tubee.name }}
</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="To Core">
<el-select style="width: 100%;" filterable clearable v-model="indexx.new_core_id" placeholder="Select To Core">
<el-option
v-for="coree in toCores"
:key="coree.id"
:label="coree.name"
:value="coree.id">
<span style="float: left">
{{ coree.name }}
</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-button slot="append" @click="addChild(b)" type="success" icon="el-icon-plus"></el-button>
<el-button slot="append" @click="removeChild(b)" v-show="b || ( !b == variationChilds.lenghth > 1)" type="danger" icon="el-icon-delete"></el-button>
</div>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="24">
<el-form-item label="Description">
<el-input
autosize
type="textarea"
:rows="2"
placeholder="Please input your description here."
v-model="form.description">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="24">
<el-form-item label="Gallery">
<el-col :span="10">
<el-upload
class="upload-demo"
drag
action="/api/upload/singleClosure"
:on-exceed="handleExceed"
:on-remove="handleRemove"
:on-preview="handlePictureCardPreview"
:on-success="handleGallerySuccess"
:before-remove="beforeRemove"
:limit="10"
v-model="form.images"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">Drop file here or <em>click to upload</em></div>
<div class="el-upload__tip" slot="tip">jpg/png files. <br> Maximun 10 images.</div>
</el-upload>
</el-col>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">Cancel</el-button>
<el-button type="primary" @click="onSubmit">Confirm</el-button>
</span>
</el-dialog>
Script
data() {
return {
variationChilds: [
{
old_core_id: '',
new_core_id: ''
}
],
form: {
name: '',
link_id: '',
description: '',
position: '',
cable_id_id: '',
images: [],
cores: [],
longitude: '',
latitude: '',
},
}
},
methods: {
// add core child
addChild(index){
this.variationChilds.push({
old_core_id: '',
new_core_id: ''
});
},
// remove cores child
removeChild(index){
this.variationChilds.splice(index, 1);
},
onSubmit(e) {
e.preventDefault();
this.form.cores.push(this.variationChilds); // this how i currently push my data into form.cores
axios.post('/api/admin/closures', {
form: this.form,
cores: this.variationChilds // this part below is for testing purpose only (it has to be pushed into form.cores)
})
.then(res => {
this.$notify({
title: 'Hooray!',
message: res.data.message,
offset: 100,
type: 'message'
});
this.dialogFormVisible = false
this.form = {
name: '',
link_id: '',
description: '',
cable_id: '',
position: '',
longitude: '',
images: [],
cores: [],
latitude: '',
};
})
.catch(error => {
var errors = error.response.data;
let errorsHtml = '<ol>';
$.each(errors.errors,function (k,v) {
errorsHtml += '<li>'+ v + '</li>';
});
errorsHtml += '</ol>';
this.$notify.error({
title: 'Error',
dangerouslyUseHTMLString: true,
message: errorsHtml
});
})
},
}
Screenshot
This is how my form looks like:
Question
How can I push my data into form.cores as i showed in my second sample code?
Update
I have made some changes (probably not the best solution) but it gives me the result + small issue :)
So I basically changed push in my function to this code:
const valObj = this.variationChilds.map(function(elem){
return elem.old_core_id;
});
const valObj2 = this.variationChilds.map(function(elem){
return elem.new_core_id;
});
if(valObj.length > 0)
{
for (let i = 0; i < valObj.length; i++)
{
for (let i = 0; i < valObj2.length; i++)
{
this.form.cores.push(valObj[i], valObj2[i]);
}
}
}
now it gives me this result
The problem with this is that I get my values twice (marked as Extra in screenshot).
