我有一个vuejs表单和一个纯基于JS的地图小部件。我需要将地图(香草js(中的坐标提取到表单输入(vuejs(中。我该怎么做?视图:
<el-form :model="storeForm" label-width="200px" ref="storeForm" status-icon size="small">
<el-form-item label="Address" prop="Address">
<el-input v-model="storeForm.Address" type="textarea"></el-input>
</el-form-item>
<el-form-item>
<div id="map" style="width: 600px; height: 400px"></div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="save('storeForm')">Save</el-button>
<el-button @click="cancel()">Cancel</el-button>
</el-form-item>
</el-form>
还有一个 vuejs 代码:
export default {
data() {
return {
isNew: true,
storeForm: {
Address: ''
}
}
},
created() {
ymaps.ready(function () {
var map = new ymaps.Map("map", {
center: [43.241203, 76.957206],
zoom: 13
});
map.events.add('click', (e) => {
var coords = e.get('coords');
//obviously that doesn't work
this.storeForm.Address = e.get('coords');
});
});
}
}
行
ymaps.ready(function () {
创建一个新范围,因此this
不再是你的 Vue 应用程序。
替换为
ymaps.ready(() => {
或者在该函数的末尾添加.bind(this)
。