避免使用非原始值作爲鍵，而是使用字符串/數值。在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

回答

相關問題