VueJs push array into array values only

Question

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

Answer 1

EDIT: If you want to loop through elements in an Array without returning an array of the same size, you can use a forEach method to define your custom function. In your case,

this.variationChilds.forEach(el => {
  this.form.cores.push(el.old_core_id);
  this.form.cores.push(el.new_core_id);
})

should do the trick.

Original Answer: VariationChilds is an array, and you're pushing the entire array as one element into your form.cores array, causing your problem.

this.form.cores.push(this.variationChilds); // [].push([{old_core, new_core},{old_core,new_core}]

If you want a copy of variationChilds as the value for form.cores, use this.form.cores = this.variationChilds.slice(). Alternatively, use a spread operator to push every contained element separately to the new array this.form.cores.push(...this.variationChilds)

Or, depending on your use case, you could simply push a new entity directly to this.form.cores instead of having the extra layer in between.