vue中v-for写成render的形式,key怎么解决?

项目中有部分代码,写层render的形式比template会更好...
但是遇到了一个问题,我们都知道v-for的时候是必须要设置key的,当我用render去遍历一个数组的时候,key怎么设置呢?我将key放在单个组件的props或是domProps都不起作用。一下是render代码:
这里Goup和Cell都是vue对象...也就是components

render(h): any {
        const mapNode = (h): any =>{
            const conArray = [];
            let hVnode = ( vNodeName, part ): any =>{
                return h(vNodeName, {
                    props: {
                        part: part,
                        key: part.partId
                    },
                    domProps: {
                        key: part.partId
                    },
                });
            } 
            for(let item of this.partList) {
                if(item.partType === 'group') {
                    conArray.push( hVnode(Group, item) );
                } else {
                    conArray.push( hVnode(Cell, item) );
                }
            }
            return conArray;
        }
        return h( 'div', {
                attrs: {
                    class: 'group-list',
                    id: "group-list"
                }
            },
            mapNode(h)
        );
    },

可行的方案是template,一下是代码

<template>
    <div class='group-list' id="group-list">
        <div v-for="item of partList" :key="item.partId">
            <template v-if="item.partType === 'group'">
                <Group :part="item"></Group>
            </template>
            <template v-else-if="item.partType === ''">
                <Cell :part="item"></Cell>
            </template>
        </div>
    </div>
</template>

以上render的形式key值不起作用,表现在删除数组的时候,一定会删除最后一个(即使我删除的是第一个数组对象)...

阅读 5.8k
1 个回答
return h(vNodeName, {
  key: part.partId,
});

教个小诀窍,如果对render不是很熟,可以先写好template,然后借助Vue.compile来生成render

import Vue from 'vue';

const res = Vue.compile(`
<div class='group-list' id="group-list">
  <div v-for="item of partList" :key="item.partId">
      <template v-if="item.partType === 'group'">
          <Group :part="item"></Group>
      </template>
      <template v-else-if="item.partType === ''">
          <Cell :part="item"></Cell>
      </template>
  </div>
</div>
`);

console.log(res.render);

这样控制台会打印出来生成好的render函数,不明白可以参见内部细节

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏