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

Question

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

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
      )
    )
  }
}