CODEWITHSUNDEEP
javascriptvue.jsdebugging
Azael Contramaestre
Azael Contramaestre

Reputation: 51

[Vue warn]: Invalid prop: type check failed for prop "eventKey". Expected String, Number, got Array AND Avoid using non-primitive value as key

Here is the code im using, here are the errors in console output:

[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

[Vue warn]: Invalid prop: type check failed for prop "eventKey". Expected String, Number, got Array

          <a-select
            option-filter-prop="children"
          >
            <a-select-option
              v-for="(item, i) in branch"
              :key="i"
              :value="item.branches"
            >
              <span>{{ item.title }}</span>
            </a-select-option>
          </a-select></a-col
        >
      </a-row>

i've also tried: :key="${++i}-${branch}"

and the warn still pops up

in the same file i iterate the same array but for another purpose. it should not make a difference, should not?

<Collapse v-for="(item, index) in branch" :key="++index">
           <a-collapse-panel :header="item.title">
             <Collapse v-for="(foo, inde) in item.branches" :key="inde">
               <a-collapse-panel :header="foo.title">
                 <a-row>
                   <a-col>
                     <p>{{ foo.title }}</p>
                   </a-col>
                   <a-col>
                     <p>Hello world</p>
                   </a-col>
                 </a-row>
               </a-collapse-panel>
             </Collapse>
           </a-collapse-panel>
         </Collapse>

quick pd: The error shows 15 times, the same amount of objects i have in branches

branch content:

 "region": [
        {
          "title": "xxxxxx",
          "branches": [
            {
              "title": "xxxxx",
              "description": "xxxxxxx",
              "link": "xxxxxxxxxxxxxx"
            }
          ]
        },
      ]

Upvotes: 2

Views: 2125

Answers (1)

Azael Contramaestre
Azael Contramaestre

Reputation: 51

So i was using ant design for vue.. this framework comes with a component named a-select.. this comes with a function: @change="handleChange", this receives a node..

So i could not assign to value an object, is has to be a string or a num, even tho the error was not directing me to value, it was directing me to "Key".

this.titles = res.subsidiary.region.map((e) => e.title)

i had to map title

            <a-select-option
              v-for="(title, i) in titles"
              :key="i"
              :value="title"
            >

iterate title...

and in methods i did this:

  methods: {
    handleChange(_, node) {
      this.show = this.branch[node.key].branches
    },
  },

depending on the node you are, you are going to look for the ""branch"" that belongs to the node itself. so shows has the branch that i want to show.

Thanks to @Fabian Skarmeta for the help.

Upvotes: 2

Related Questions