Question

我需要使用“编辑”和“删除”按钮在一种表单输入中显示完整地址，所以它可以正常工作，但是在浏览器控制台中，对于所有这样的地址我都出错

'[Vue警告]：“输入”事件处理程序中的错误：“ TypeError：无法使用'in'运算符在'国家名称'，'城市'，'街道地址'，[对象]中搜索“ zip”对象]“'

我的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"

Answer 1

我认为您的问题在于绑定v-model。如何使用它，它可以绑定/合并多个变量，而这些变量并不是v-modal的预定用途。

如果只想显示该值，则可以尝试更改：

v-model="address.countryName + ', ' + address.city + ', ' + address.streetAddress + ', ' + address.zip"

到

:value="address.countryName + ', ' + address.city + ', ' + address.streetAddress + ', ' + address.zip"

如何绑定V模型中数组中的多个值以在vue.js上进行表单输入？

1 个答案: