javascript - VueJs 仅将数组推入数组值
问题描述
我有多个输入希望传递给我的表单变量，但结果是数组到数组中，这不是我需要的。
样品
所有部分均已注释，因此您不会感到困惑。
这就是我现在所拥有的：
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
]
]
]
这就是我想要拥有的
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
]
]
代码
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
这就是我的表单的样子：
问题
如何将我的数据推送到form.cores我在第二个示例代码中显示的内容？
更新
我做了一些改变（可能不是最好的解决方案），但它给了我结果+小问题:)
因此，我基本上将函数中的 push 更改为以下代码：
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]);
}
}
}
现在它给了我这个结果
问题是我得到了两次我的值（在屏幕截图中标记为 Extra）。
解决方案
编辑：如果您想遍历 Array 中的元素而不返回相同大小的数组，您可以使用 forEach 方法来定义您的自定义函数。在你的情况下，
this.variationChilds.forEach(el => {
this.form.cores.push(el.old_core_id);
this.form.cores.push(el.new_core_id);
})
应该做的伎俩。
原始答案： VariationChilds 是一个数组，您将整个数组作为一个元素推入您的 form.cores 数组，从而导致您的问题。
this.form.cores.push(this.variationChilds); // [].push([{old_core, new_core},{old_core,new_core}]
如果您想要一个 variantChilds 的副本作为 form.cores 的值，请使用this.form.cores = this.variationChilds.slice(). 或者，使用扩展运算符将每个包含的元素分别推送到新数组this.form.cores.push(...this.variationChilds)
或者，根据您的用例，您可以简单地将新实体直接推送到 this.form.cores，而不是在两者之间添加额外的层。
推荐阅读
- c++ - 将矩阵排序到第n列c ++
- html - 当屏幕尺寸减小时，如何将媒体查询网格元素堆叠在一起？
- php - 电话号码正则表达式应以 0 开头
- javascript - 当只有一个参数但有两个变量时，闭包如何工作？
- gitlab - .gitlab-ci.yml 我们可以捕获 curl 的响应然后有选择地运行后续阶段吗？
- javascript - Typescript React 中的动态过滤
- python - 如何在循环的每次迭代中使用 for-loop 为 SVR 生成 X_train？
- python-3.x - 将矩形图像投影到弯曲的背景上
- asp.net-core - 如何使用带有自定义参数的 ASP.NET Core 实现 dhtmlxScheduler？
- rest - VMware Rest API 身份验证失败