[Vue警告]：無效的道具：道具“eventKey”的型別檢查失敗。預期的字串、數字、得到陣列并避免使用非原始值作為鍵

這是我使用的代碼，這是控制臺輸出中的錯誤：

[Vue 警告]：避免使用非原始值作為鍵，而是使用字串/數字值。

[Vue 警告]：無效的道具：道具“eventKey”的型別檢查失敗。預期字串，數字，得到陣列

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

我也試過：:key=" ${ i}-${branch}"

并且警告仍然彈出

在同一個檔案中，我迭代同一個陣列，但出于另一個目的。它不應該有所作為，不是嗎？

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

快速 pd：錯誤顯示 15 次，與我在分支中的物件數量相同

分行內容：

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

uj5u.com熱心網友回復：

你能添加更多資訊嗎？喜歡：

• branch物件的結構如何
• option-filter-prop="children"它不是一個<select>屬性，你在使用任何框架嗎？

uj5u.com熱心網友回復：

所以我在 vue 上使用 ant design .. 這個框架帶有一個名為 a-select 的組件.. 它帶有一個函式：@change="handleChange"，它接收一個節點..

所以我不能給一個物件賦值，它必須是一個字串或一個數字，即使錯誤沒有引導我去賦值，它也引導我到“鍵”。

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

我必須映射標題

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

迭代標題...

在方法中我這樣做了：

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

根據您所在的節點，您將尋找屬于該節點本身的“分支”。所以顯示有我想顯示的分支。

感謝@Fabian Skarmeta 的幫助。

uj5u.com熱心網友回復：

嘗試如下代碼片段：

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>

標籤：javascript Vue.js 调试

上一篇：Asp.netcore如何一一顯示IEnumerable模型

下一篇：已修復的代碼行出錯