CODEWITHSUNDEEP
vue.jsvuejs2
kewin123
kewin123

Reputation: 147

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

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"

Upvotes: 1

Views: 4578

Answers (1)

T. Dirks
T. Dirks

Reputation: 3676

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"

Upvotes: 4

Related Questions