避免使用非原始值作为键，而是使用字符串/数字值.在 VueJS 中 [英] Avoid using non-primitive value as key, use string/number value instead. in VueJS

问题描述

我正在尝试构建一个应用程序，我正在尝试获取值，一切正常，

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

但是突然开始出现一些错误:

<块引用>

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

某处:

<div><button @click.prevent="" v-for="(obj, key) in tags":键=键"class="btn btn-rounded btn-sm":class="tagParentClass(key)">{{钥匙}}

tags

的数据集

export const tags = {投资者:[{display: "Mutual Fund", value: 'Mutual Fund'},{display: "Insurance", value: 'Insurance'},{显示:FII"，值:'FII'}，{显示:PMS"，值:'PMS'}，{display: "Proprietary", value: 'Proprietary'},{显示:HNI"，值:'HNI'}，{display: "Private Equity", value: 'Private Equity'},{display: "Others", value: 'Others'}],研究: [{display: "Global", value: 'Global'},{display: "Domestic", value: 'Domestic'},{显示:零售"，价值:零售"}，{display: "Others", value: 'Others'}],公司的: [{display: "Corporate", value: 'Corporate'}],其他: [{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 格式修改为以下格式，警告消息将消失

<代码>[{投资者:[{display: "Mutual Fund", value: 'Mutual Fund'},{display: "Insurance", value: 'Insurance'},{显示:FII"，值:'FII'}，{显示:PMS"，值:'PMS'}，{display: "Proprietary", value: 'Proprietary'},{显示:HNI"，值:'HNI'}，{display: "Private Equity", value: 'Private Equity'},{display: "Others", value: 'Others'}]},{研究: [{display: "Global", value: 'Global'},{display: "Domestic", value: 'Domestic'},{显示:零售"，价值:零售"}，{display: "Others", value: 'Others'}]},{公司的: [{display: "Corporate", value: 'Corporate'}]},{其他: [{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 格式.
试试这个方法，让我知道它是否有效

模板

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

脚本

 导出默认 {数据 () {返回 {标签:[{主题:投资者"，类别 : [{display: "Mutual Fund", value: 'Mutual Fund'},{display: "Insurance", value: 'Insurance'},{显示:FII"，值:'FII'}，{显示:PMS"，值:'PMS'}，{display: "Proprietary", value: 'Proprietary'},{显示:HNI"，值:'HNI'}，{display: "Private Equity", value: 'Private Equity'},{display: "Others", value: 'Others'}]},{主题:研究"，类别 : [{display: "Global", value: 'Global'},{display: "Domestic", value: 'Domestic'},{显示:零售"，价值:零售"}，{display: "Others", value: 'Others'}]},{主题:企业"，类别 : [{display: "Corporate", value: 'Corporate'}]},{主题:其他"，类别 : [{display: "Debt", value: 'Debt'},{display: "Debt Adviser", value: 'Debt Adviser'},{display: "Investment Banker", value: 'Investment Banker'},{display: "Media", value: 'Media'},{display: "Others", value: 'Others'}]}]}}}

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.

解决方案

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

这篇关于避免使用非原始值作为键，而是使用字符串/数字值.在 VueJS 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！