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

Posted 2023-02-23

【中文标题】Vue 计算数组追加值而不是重写

【英文标题】：Vue computed array appends values instead of rewriting

【发布时间】：2020-12-05 17:00:36

【问题描述】：

我有一个名为 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;
            ,

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

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

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

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

【问题讨论】：

首先，你在你的计算属性中改变了this.platforms，这是你不应该做的。请改用list = this.platforms.slice()。

【参考方案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
      )
    )
  

【讨论】：

感谢您帮助简化计算属性，我决定在 jsfiddle 中单独测试代码，似乎问题在于我在项目中使用的自定义选择组件没有正确更新选项。 jsfiddle.net/wvco65th