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"
            }
          ]
        },
      ]

CodePudding user response：

Can you add more info please? like:

• how's branch object is structured
• option-filter-prop="children" it's not a <select> attribute, are you using any framework?

CodePudding user response：

Try like following snippet:

new Vue({
  el: '#demo',
  data() {
    return {
      data: [{
      "region": [
        {
          "title": "xxxxxx",
          "branches": [
            {
              "title": "xxxxx",
              "description": "xxxxxxx",
              "link": "xxxxxxxxxxxxxx"
            },
          ]
        },
        {
          "title": "yyyy",
          "branches": [
            {
              "title": "xxxxx",
              "description": "xxxxxxx",
              "link": "xxxxxxxxxxxxxx"
            },
          ]
        },
      ]},
      ]
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <select
    option-filter-prop="children"
  >
    <option
      v-for="(item, i) in data[0].region"
      :key="i"
      :value="item.branches"
    >
      <span>{{ item.title }}</span>
    </option>
  </select>
     
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>