How can I bind multiple values from array in v-model for form-input on vue.js? - vue.js

Question

I need to show full address in one form-input with buttons 'Edit' and 'Delete', so it's working, but in browser console I have error for all addresses like this
'[Vue warn]: Error in event handler for "input": "TypeError: Cannot use 'in' operator to search for 'zip' in 'Country Name', 'City', 'Street Address', [object Object]"'
My vue code:
<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>
I don't understand why I am getting this error but it's working. Is there another better solution for this? And without error?
v-model="address.countryName + ', ' + address.city + ', ' + address.streetAddress + ', ' + address.zip"

Answer 1

I think your problem lays with binding the v-model. How you have it, it binds/concats multiple variables which isn't the intended use for v-modal.
If you only want to display the value, you could try changing:
v-model="address.countryName + ', ' + address.city + ', ' + address.streetAddress + ', ' + address.zip"
to
:value="address.countryName + ', ' + address.city + ', ' + address.streetAddress + ', ' + address.zip"