Мне нужно показать полный адрес в одной форме с кнопками «Изменить» и «Удалить», чтобы он работал, но в консоли браузера у меня есть ошибка для всех таких адресов.
'[Vue warn]: ошибка в обработчике событий для «input»: «TypeError: невозможно использовать оператор' in 'для поиска' zip 'в' Country Name ',' City ',' Street Address ', [object 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"
@ Т.Диркс Да, imgur.com/a/KT9wAps
Извините, я имел в виду, как это может выглядеть с точки зрения данных. Вы можете показать console.info
из addressList
?
@ T.Dirks Вы имеете в виду это? imgur.com/a/prF1fPw
v-model
предполагается использовать с одной переменной. Вы должны использовать отдельные входы для каждой переменной.
Думаю, ваша проблема связана с привязкой v-model
. Как у вас это есть, он связывает / объединяет несколько переменных, что не является предполагаемым использованием для v-modal
.
Если вы хотите только отобразить значение, вы можете попробовать изменить:
v-model = "address.countryName + ', ' + address.city + ', ' + address.streetAddress + ', ' + address.zip"
к
:value = "address.countryName + ', ' + address.city + ', ' + address.streetAddress + ', ' + address.zip"
Можете ли вы показать, как
addressList
может выглядеть после того, как он будет заполнен данными?