Vue计算数组附加值而不是重写

Question

我有一个名为 contactDetails 的数组，用于保存用户的不同联系点列表（例如 phone 号码、社交媒体句柄等）。可用的联系人平台在列表中预定义。我有一个计算值，用于跟踪用户尚未添加为联系方式的平台。计算的数组用于 select 字段，供用户在创建新联系人详细信息时选择。

new Vue({
    el: '#app',
    data() {
        return {
            platforms: [
                {
                    text: 'WhatsApp',
                    value: 1,
                },
                {
                    text: 'Call',
                    value: 2,
                },
                {
                    text: 'Email',
                    value: 3,
                },
                {
                    text: 'LinkedIn',
                    value: 4,
                },
                {
                    text: 'TikTok',
                    value: 5,
                },
                {
                    text: 'Twitter',
                    value: 6,
                },
            ],
            contactDetails: [],
        },
        onAddContactDetails() {
            var selectedPlatform = this.platforms.find(obj => {
                return obj.value == this.platformId
            })

            var newContact = {
                platform: selectedPlatform.value,
                platformName: selectedPlatform.text,
                channel: this.channel,
                priority: this.contactPriorityId
            }
            this.contactDetails.push(newContact)
            this.updatePriority(newContact, this.contactDetails)

            this.platformId = null
            this.contactPriorityId = null
            this.channel = null

            this.platformList = null;
            this.isAddContact = false;
        },
        computed: {
            platformList() {
                var list = [];
                if (this.contactDetails.length == 0) {
                    return this.platforms;
                } else {
                    list = this.platforms;
                    for (var i = 0; i < this.contactDetails.length; i++) {
                        var id = this.contactDetails[i].platform;
                        for (var j = 0; j < this.platforms.length; j++) {
                            if (this.platforms[j].value == id) {
                                list.splice(j, 1)
                            }
                        }
                    }
                }
                return list;
            },

这是添加新联系人详细信息之前下拉菜单的样子。

然而，我计算的属性更新，但不是刷新列表，而是将新列表附加到现有选项上，从而导致重复。

原始列表+新的联系人详细信息列表，应该是（完整列表-用户已经添加的联系人）

我想知道如何解决这个问题，以及是否有更好的方法来设置下拉菜单中留给用户的可用选项。谢谢！

Answer 1

你在计算属性中改变 this.platforms；如果你要改变它，你应该先克隆它：

list = this.platforms.slice()

不过我不确定是什么导致了重复。您只会推送到 contactDetails 并从 platforms 移除。

您计算的属性可以简化很多：

computed: {
  platformList() {
    // Filter platforms
    return this.platforms.filter(platform =>
      // Include this platform if there is no contact detail using that platform
      !this.contactDetails.some(contact =>
        contact.platform === platform.value
      )
    )
  }
}

Vue计算数组附加值而不是重写

Vue computed array appends values instead of rewriting

javascript

arrays

vue.js

computed-properties