vue渲染列表时报错Avoid using non-primitive value as key, use string/number value instead.

左手的ㄟ右手 2022-12-20 03:27 202阅读 0赞

<el-row :gutter="20">
        <div class="icons-container">
          <div class="grid">
            <div v-for="itemKey of svgIcons" :key="itemKey" :style="itemKey[3]">
              <el-tooltip placement="top">
                <div slot="content">
                  {
   { generateIconCode(itemKey[0]) }}
                </div>
                <div class="icon-item">
                  <svg-icon :icon-class="itemKey[1]" @click="searchDetail(itemKey[0])"/>
                  <span @click="searchDetail(itemKey[0])">{
   { itemKey[2] }}</span>
                </div>
              </el-tooltip>
            </div>
          </div>
        </div>
      </el-row>

改为

<el-row :gutter="20">
        <div class="icons-container">
          <div class="grid">
            <div v-for="(itemKey,index) of svgIcons" :key="index" :style="itemKey[3]">
              <el-tooltip placement="top">
                <div slot="content">
                  {
   { generateIconCode(itemKey[0]) }}
                </div>
                <div class="icon-item">
                  <svg-icon :icon-class="itemKey[1]" @click="searchDetail(itemKey[0])"/>
                  <span @click="searchDetail(itemKey[0])">{
   { itemKey[2] }}</span>
                </div>
              </el-tooltip>
            </div>
          </div>
        </div>
      </el-row>