1

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"
5
  • Can you show what addressList might look like once it's filled with data? Commented Oct 31, 2018 at 9:53
  • @T.Dirks Yes, imgur.com/a/KT9wAps Commented Oct 31, 2018 at 10:09
  • Sorry, I meant what it might look like data wise. Can you show a console.log of addressList? Commented Oct 31, 2018 at 10:17
  • @T.Dirks You mean this? imgur.com/a/prF1fPw Commented Oct 31, 2018 at 10:23
  • 1
    v-model is supposed to be used with a single variable. You should use separate inputs for each variable. Commented Oct 31, 2018 at 10:26

1 Answer 1

4

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"
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.