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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

这里是我的代码：https://codeshare.io/aY7rX3

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

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

某处周围：

<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'} 
    ] 
}

数据集帮我在这。

回答：

尝试更改标记的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'} 
       ] 
       } 
      ] 
     } 
     } 
    }

回答：

在对象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>

以上是 避免使用非原始值作为键，而是使用字符串/数值。在VueJS 的全部内容， 来源链接： utcz.com/qa/261326.html

回到顶部