问题

在使用v-for创建动态表单后，需要通过地图工具组件获取空间坐标给动态表单中的空间位置表单项赋值，由于表单的key是个变量，在外部JavaScript方法中赋值的时候key不好定义

Vue.js动态表单

动态表单部分.

<div v-for="(item, index) in temp.blockObject" :key="item.key">
	<el-form-item label="空间位置" :prop="'blockObject.'+ index +'.wkt'">
		<el-input readonly v-model="item.wkt" placeholder="请点击空间拾取按钮绘制空间位置">
			<el-button slot="append" @click="drawGeometry(temp.wkt, index)">空间拾取</el-button>
		</el-input>
	</el-form-item>
</div>

数据获取

打开空间采集页面采集空间坐标，赋给全局变量DrawGeometryData.

//打开空间位置采集页面，绘制空间几何图形
drawGeometry(shape, key) {
	this.mapKey = key
	this.mapDialogVisible = true
},

将数据赋值给key

将绘制的几何图形坐标赋值给当前对应的key

//保存坐标，将绘制的几何图形坐标赋给全局变量
getCoordinate() {
	let _that=this.mapKey
	this.mapDialogVisible = false
	this.temp.blockObject[_that].wkt = this.$store.getters.DrawGeometryData
},

总结

假使 var key1 = “aaa”;

var value1 = “bbbb”;

json 对象 data={k:‘aa’,b:‘aaa’};

这时如果想给data改为 {k:‘aa’,b:‘aaa’,aaa:‘bbbb’};

用 data.key1 = value1;这样是不行的。会把变量名作为key来传输。

那么 我们的解决方案的写法为 data[key1] = value1;