VueJs 仅将数组推入数组值
Posted
技术标签:
【中文标题】VueJs 仅将数组推入数组值【英文标题】：VueJs push array into array values only 【发布时间】：2020-08-03 17:07:54 【问题描述】：我有多个输入希望传递给我的表单变量，但结果是数组到数组中，这不是我需要的。
样品
所有部分均已注释，因此您不会感到困惑。
这就是我现在拥有的：
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->
<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）。
【问题讨论】：
没人知道吗？ :// 【参考方案1】：编辑：如果您想遍历 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]
如果您想要一个variationChilds 的副本作为form.cores 的值，请使用this.form.cores = this.variationChilds.slice()。或者，使用扩展运算符将每个包含的元素分别推送到新数组this.form.cores.push(...this.variationChilds)
或者，根据您的用例，您可以简单地将新实体直接推送到 this.form.cores，而不是在中间添加额外的层。
【讨论】：
谢谢，我会试试这个，如果可行，请告诉你。 我已经试过你的代码（他们两个）他们返回的数据如"cores" => array:2 [ 0 => array:2 [ "old_core_id" => 13 "new_core_id" => 4 ] 1 => array:2 [ "old_core_id" => 9 "new_core_id" => 7 ] ]我正在寻找的是"cores" => array:4 [ 0 => 3 1 => 11 2 => 5 3 => 20 ]所以不会有old_core_id或new_core_id
我不知道您的解释中的不同数字是什么。假设它们是 new_core_id 的值：this.form.cores = this.variationChilds.map(x => x.new_core_id)。您可以将 Array.map 与回调函数一起使用，以返回一个新数组，其中的元素源自原始数组中的元素，但与原始数组中的元素不同。
好的，看看我在我的数据库中存储数据的方式是sync()，所以我只需要将 id 发送到后端而不需要任何名称，例如 old_core_id 等。
我刚刚更新了我的问题，您介意检查一下吗？以上是关于VueJs 仅将数组推入数组值的主要内容，如果未能解决你的问题，请参考以下文章