Avoid using non-primitive value as key, use string/number value instead. in VueJS

Question

I'm trying to build an application where I'm trying to get values, everything was working fine,

Here is my code: https://codeshare.io/aY7rX3

But suddenly some error started coming:

Avoid using non-primitive value as key, use string/number value instead

Somewhere around:

<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>

The data set of 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'}
    ]
}

Help me out in this.

`key` is an object. Use a unique property within `key` as the actual key. Do your objects have unique identifiers? — Eric Guan, Dec 18 '17 at 07:32
@EricGuan No, I'm importing hard code data without having identifiers. I've updated the question. — Nitish Kumar, Dec 18 '17 at 07:36
Try `v-for="(obj, key, index) in tags"` and use index as key — Iwan Wijaya, Dec 18 '17 at 07:47

divine · Answer 1 · 2017-12-18T10:52:59.620

Try changing the JSON format of tags.
The warning message will disappear if you modify your JSON Format to below format

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

Updated:

i have updated your JSON format to a more friendlier JSON Format that is used in most usecases.
Try this approach and let me know if it works

Template

<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>

Script

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

This ain't helping me out, I can't make it to array my whole structure will be dis-balanced, as it is taking the key and finding the child elements. As you can see the code. the very next to the code which i mentioned in question. — Nitish Kumar, Dec 18 '17 at 10:11
Your aim is to pass a key to a function. But, the key has to be the one related to your business logic, is it? — divine, Dec 18 '17 at 10:32
currently I'm getting null/no data is being displayed according to your format. More over I'm having other for loop which takes the value of this tag and displays the child element. please look for `v-for="tag in tags[currentTag]"` — Nitish Kumar, Dec 18 '17 at 10:35
i've added the inner loop just for your clarity. you can change it as you prefer — divine, Dec 18 '17 at 10:55
Ok, will tryout and let you know. I guess I'll have to change this logic to few more places also. as my tag data format is being used in few other places too. — Nitish Kumar, Dec 18 '17 at 11:05
@NitishKumar i would recommend you to prefer the JSON format which i proposed rather than going ahead with the JSON format in your question — divine, Dec 18 '17 at 11:12

score -2 · Answer 2 · answered Dec 18 '17 at 09:50

in object tags you have nested objects in the array

if you want pass all 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>

you have structure **object**. then **object** have **array**. then **array** have another **object**. see instruction list rendering https://vuejs.org/v2/guide/list.html in sum you will have a structure HTML that replicate you object `tags` — Volodymyr Symonenko, Dec 18 '17 at 11:11

Avoid using non-primitive value as key, use string/number value instead. in VueJS

2 Answers2

Linked