避免使用非原始值作为键，而是使用字符串/数值。在VueJS

我试图建立在那里我试图让值的应用程序，一切工作正常，避免使用非原始值作为键，而是使用字符串/数值。在VueJS

但突然有些错误开始大量涌现：

避免使用非原始值作为密钥，利用串/数值，而不是

某处周围：

<div class="col-sm-4 border-right"> 
    <div> 
     <button @click.prevent="" v-for="(obj, key) in tags" 
       :key="key" 
       class="btn btn-rounded btn-sm" 
       :class="tagParentClass(key)"> 
      {{key}} 
     </button> 
    </div> 
</div>

的tags

export const tags = { 
    Investor: [ 
     {display: "Mutual Fund", value: 'Mutual Fund'}, 
     {display: "Insurance", value: 'Insurance'}, 
     {display: "FII", value: 'FII'}, 
     {display: "PMS", value: 'PMS'}, 
     {display: "Proprietary", value: 'Proprietary'}, 
     {display: "HNI", value: 'HNI'}, 
     {display: "Private Equity", value: 'Private Equity'}, 
     {display: "Others", value: 'Others'} 
    ], 
    Research: [ 
     {display: "Global", value: 'Global'}, 
     {display: "Domestic", value: 'Domestic'}, 
     {display: "Retail", value: 'Retail'}, 
     {display: "Others", value: 'Others'} 
    ], 
    Corporate: [ 
     {display: "Corporate", value: 'Corporate'} 
    ], 
    Others: [ 
     {display: "Debt", value: 'Debt'}, 
     {display: "Debt Adviser", value: 'Debt Adviser'}, 
     {display: "Investment Banker", value: 'Investment Banker'}, 
     {display: "Media", value: 'Media'}, 
     {display: "Others", value: 'Others'} 
    ] 
}

数据集帮我在这。

来源

2017-12-18 Nitish Kumar

'key'是一个对象。在'key'中使用一个唯一的属性作为实际的键。你的对象是否有唯一的标识符？ –

@EricGuan不，我正在导入硬编码数据而没有标识符。我已经更新了这个问题。 –

你有没有尝试插入作为一个字符串的关键？ – Maru

尝试更改标记的JSON格式。
如果您修改JSON格式以下格式

[{ 
    Investor: [ 
     {display: "Mutual Fund", value: 'Mutual Fund'}, 
     {display: "Insurance", value: 'Insurance'}, 
     {display: "FII", value: 'FII'}, 
     {display: "PMS", value: 'PMS'}, 
     {display: "Proprietary", value: 'Proprietary'}, 
     {display: "HNI", value: 'HNI'}, 
     {display: "Private Equity", value: 'Private Equity'}, 
     {display: "Others", value: 'Others'} 
    ] 
    }, 
    { 
    Research: [ 
     {display: "Global", value: 'Global'}, 
     {display: "Domestic", value: 'Domestic'}, 
     {display: "Retail", value: 'Retail'}, 
     {display: "Others", value: 'Others'} 
    ] 
    }, 
    { 
    Corporate: [ 
     {display: "Corporate", value: 'Corporate'} 
    ] 
    }, 
    { 
     Others: [ 
     {display: "Debt", value: 'Debt'}, 
     {display: "Debt Adviser", value: 'Debt Adviser'}, 
     {display: "Investment Banker", value: 'Investment Banker'}, 
     {display: "Media", value: 'Media'}, 
     {display: "Others", value: 'Others'} 
    ] 
    } 
    ]

更新的警告信息将消失：

我有你的JSON格式更新到在大多数使用更友好的JSON格式用例。
试试这个办法，让我知道，如果它

模板

<div v-for="(obj,index) in tags" :key="index"> 
       {{index}} {{obj.topic}} 
     <div style="padding-left: 20px;" v-for="(category,index1) in obj.category" :key="index1"> 
       {{index1}} == {{category.display}} || {{category.value}} 
       </div> 
      </div>

脚本数组中

export default { 
     data() { 
     return { 
      tags : 
      [ 
       { 
       topic : "Investor", 
       category : [ 
       {display: "Mutual Fund", value: 'Mutual Fund'}, 
       {display: "Insurance", value: 'Insurance'}, 
       {display: "FII", value: 'FII'}, 
       {display: "PMS", value: 'PMS'}, 
       {display: "Proprietary", value: 'Proprietary'}, 
       {display: "HNI", value: 'HNI'}, 
       {display: "Private Equity", value: 'Private Equity'}, 
       {display: "Others", value: 'Others'} 
       ] 
       }, 
       { 
       topic : "Research", 
       category : [ 
        {display: "Global", value: 'Global'}, 
        {display: "Domestic", value: 'Domestic'}, 
        {display: "Retail", value: 'Retail'}, 
        {display: "Others", value: 'Others'} 
       ] 
       }, 
       { 
       topic : "Corporate" , 
       category : [ 
       {display: "Corporate", value: 'Corporate'} 
       ] 
       }, 
       { 
       topic : "Others", 
       category : [ 
        {display: "Debt", value: 'Debt'}, 
        {display: "Debt Adviser", value: 'Debt Adviser'}, 
        {display: "Investment Banker", value: 'Investment Banker'}, 
        {display: "Media", value: 'Media'}, 
        {display: "Others", value: 'Others'} 
       ] 
       } 
      ] 
     } 
     } 
    }

来源

2017-12-18 08:09:12 divine

这不会帮助我，我不能使它成为数组我的整个结构将会失衡，因为它正在取得关键并找到儿童元素。正如你所看到的代码。在我提到的代码的旁边。 –

您的目标是将密钥传递给函数。但是，关键必须是与您的业务逻辑相关的关键，是吗？ – divine

当前我得到空/根据您的格式显示没有数据。更重要的是我有其他的循环，它采用这个标签的值，并显示子元素。请在标签[currentTag]“' –

-1

在对象tags你嵌套对象

如果你想通过所有tags

let tags = { 
 
    Investor: [ 
 
     {display: "Mutual Fund", value: 'Mutual Fund'}, 
 
     {display: "Insurance", value: 'Insurance'}, 
 
     {display: "FII", value: 'FII'}, 
 
     {display: "PMS", value: 'PMS'}, 
 
     {display: "Proprietary", value: 'Proprietary'}, 
 
     {display: "HNI", value: 'HNI'}, 
 
     {display: "Private Equity", value: 'Private Equity'}, 
 
     {display: "Others", value: 'Others'} 
 
    ], 
 
    Research: [ 
 
     {display: "Global", value: 'Global'}, 
 
     {display: "Domestic", value: 'Domestic'}, 
 
     {display: "Retail", value: 'Retail'}, 
 
     {display: "Others", value: 'Others'} 
 
    ], 
 
    Corporate: [ 
 
     {display: "Corporate", value: 'Corporate'} 
 
    ], 
 
    Others: [ 
 
     {display: "Debt", value: 'Debt'}, 
 
     {display: "Debt Adviser", value: 'Debt Adviser'}, 
 
     {display: "Investment Banker", value: 'Investment Banker'}, 
 
     {display: "Media", value: 'Media'}, 
 
     {display: "Others", value: 'Others'} 
 
    ] 
 
} 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    tags 
 
    } 
 
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script> 
 
<div id="app"> 
 
    <div class="col-sm-4 border-right"> 
 
    <div v-for="(tag, key) in tags">{{key}} 
 
     <button @click.prevent="" 
 
       v-for="key in tag" 
 
       :key="key"> 
 
      {{key.value}} 
 
     </button> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-12-18 09:50:47

为什么你使用两个for循环？ –

你有结构**对象**。然后**对象**有**数组**。那么**数组**有另一个**对象**。查看指令列表渲染https://vuejs.org/v2/guide/list.html 总而言之，您将拥有一个结构化的HTML，可以复制您的对象'tags' –

避免使用非原始值作为键，而是使用字符串/数值。在VueJS

回答

相关问题