非プリミティブな値をキーとして使用しないでください。代わりに文字列/数値を使用してください。 VueJS

Question

に私はすべてがうまく働いていた、私は値を取得しようとしているアプリケーションを構築しようとしている、

ここ

が私のコードです：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'} 
    ] 
} 

のデータセットは、この中で私を助けて。

Answer 1

タグの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フォーマットにあなたのJSON形式を更新した

ユースケース。
このアプローチを試してみて、それがあれば、あなたは、配列

内のオブジェクトを入れ子にしたオブジェクトtagsで

テンプレート

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

Answer 2

を動作するかどうか私に知らせてあなたはすべてを渡したいと思っています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>