Мне нужно показать полный адрес в одной форме ввода с помощью кнопок «Редактировать» и «Удалить», так что это работает, но в консоли браузера у меня есть ошибка для всех адресов, подобных этой
'[Vue warn]: Ошибка в обработчике события для «input»: «TypeError: Невозможно использовать оператор« in »для поиска« zip »в« Название страны »,« Город »,« Уличный адрес », [объект] Object] " '
Мой код Vue:
<template>
<div>
....
</div>
...
<form class="form-inline" >
<div class="form-row col-md-6" v-for="address in addressList">
<b-form-group>
<b-form-input class="form-control mb-2 mr-sm-2" id="address.id" v-model="address.countryName + ', ' + address.city + ', ' + address.streetAddress + ', ' + address.zip" />
</b-form-group>
<div class="btn-group mr-2" role="group">
<button type="button" class="btn btn-secondary mb-2">Edit</button>
<button type="button" class="btn btn-secondary mb-2">Delete</button>
</div>
</div>
</form>
</b-form>
</div>
</template>
<script>
...
data() {
return {
addressList: [],
}
},
async beforeRouteEnter(to, from, next) {
next(async (c) => await c.initData());
},
methods: {
async initData() {
await this.loadAddressList();
},
async loadAddressList() {
this.addressList = await accountService.getAddressList();
},
}
}
</script>
Я не понимаю, почему я получаю эту ошибку, но она работает. Есть ли другое лучшее решение для этого? И без ошибок?
v-model="address.countryName + ', ' + address.city + ', ' + address.streetAddress + ', ' + address.zip"