vue.js - 如何防止多个电子邮件字段只接受一个建议？

Question

我有一组电子邮件字段。当我开始输入一个时，它会给我一些建议。然后我选择一个建议，并为所有电子邮件字段设置它。有没有办法为一个电子邮件字段选择电子邮件建议，即使页面上可能有多个？

这是一个 vue.js 应用程序。这是电子邮件字段的模板：

                <v-layout row wrap v-for="(item, index) in prop.roles" :key="index">
                    <v-flex mb-4>
                        <div class="ath-container">
                            <div class="ath-controls-container mb-2">
                                <v-text-field
                                    :id="'email-' + index"
                                    class="d-inline-block ath-email-field"
                                    outline
                                    label="Email"
                                    v-model="item.email"
                                    placeholder="[e-mail]"
                                    :rules="[v => !!v || 'Email is required',
                                        v => /.+@.+/.test(v) || 'Email is invalid' ]"
                                    maxlength="255"
                                    required>
...
            </div>
        </div>
    </v-flex>
</v-layout>

有一个“添加”按钮，允许用户添加更多电子邮件字段。但我希望在从弹出列表中选择建议的电子邮件时独立对待它们。谢谢。

编辑：请求数据和方法块。

    data() {
        return {
            isValid: false,
            isCompany: false,
            prop: {
                companyName: null,
                hasAdditionalTitleHolders: null,
                roles: [{
                    email: null,
                    notifying: false
                }],
                isMarried: null,
                hasSpouse: null
            },
            dowerRightsFilenameData: null,
            rafId: 0, // request animation frame ID (see animateStatusBarIfInView() below)
            notifyingAll: false
        }
    }

methods: {
        onDowerRightsFormPicked(e) {
            this.dowerRightsFilenameData = e.target.files[0].name;
            this.$emit('dower-rights-form-picked', e);
        },

        deleteDowerRightsForm() {
            this.dowerRightsFilenameData = '';
            this.$emit('delete-dower-rights-form');
        },

        animateStatusBarIfInView() {
            for (let index = 0; index < this.prop.roles.length; index++) {
                if (this.$refs['ath-status-bar-' + index] && this.$refs['ath-status-bar-' + index][0]) {
                    const athStatusBar = this.$refs['ath-status-bar-' + index][0];
                    const ath = this.prop.roles[index];
                    if (this.isInViewport(athStatusBar)) {
                        let className = 'ath-status-bar-init';
                        if (ath.acceptedAt) {
                            className = 'ath-status-bar-accepted';
                        } else if (ath.verifiedAt) {
                            className = 'ath-status-bar-verified';
                        } else if (ath.accountCreatedAt) {
                            className = 'ath-status-bar-account-created';
                        } else if (ath.invitedAt) {
                            className = 'ath-status-bar-invited';
                        }
                        athStatusBar.classList.add(className);
                    }
                }
            }

            // repeat:
            if (this.rafId) window.cancelAnimationFrame(this.rafId);
            this.rafId = window.requestAnimationFrame(this.animateStatusBarIfInView);
        },

        isInViewport(element) {
            const rec = element.getBoundingClientRect();
            return rec.top < (window.innerHeight || document.documentElement.clientHeight) && rec.bottom > 0;
        },

        notifyAllAths() {
            this.notifyingAll = true;
            let index = 0;
            const allIndexes = this.prop.roles.map(ath => index++);
            this.$emit('notify-aths', allIndexes);
        }
    }

标签： vue.jsemailautosuggest