Different functional componens has the same key

Version

2.5.17

Reproduction link

https://github.com/vedmaque/vue-functional-bug

Steps to reproduce

1. create Component1

<template functional>
  <div class="a">
    <div class="b">first (template)</div>
    <div class="b">component</div>
  </div>
</template>

1. create Component2

<template functional>
  <div class="x">
    <div class="y">second (template)</div>
    <div class="y">component</div>
  </div>
</template>

1. render them in App.

<template>
  <div id="app">
    <component1 />
    <component2 />
  </div>
</template>

What is expected?

Everything works fine

What is actually happening?

Vue warns about same key

[Vue warn]: Duplicate keys detected: '__static__0'. This may cause an update error.

---

If you create the same components from render function directly, it works fine, without duplicated keys (keys are undefined in this situation)

<script>
export default {
  functional: true,
  render(createElement) {
    return createElement("div", {
        staticClass: "a"
    }, [createElement("div", {
        staticClass: "b"
    }, ["first"]), createElement("div", {
        staticClass: "b"
    }, ["component"])])
  }
}
</script>

This image shows the difference in VNode objects.

Moreover, if Component1 looks likes this, it works fine too.

<template functional>
  <div class="a">first (template) component</div>
</template>

Vue Template Exporer will go crazy too if you try to compile Component1 https://template-explorer.vuejs.org/#<div class%3D"a"> <div class%3D"b">first (template)<%2Fdiv> <div class%3D"b">component<%2Fdiv> <%2Fdiv>

[inamandev]

I had the same issue and by defining a key in the template root element can resolve this issue. Example below:

First Component

<template functional>
  <div class="a" :key="'component1'">
    <div class="b">first (template)</div>
    <div class="b">component</div>
  </div>
</template>

Second Component

<template functional>
  <div class="x" :key="'component2'">
    <div class="y">second (template)</div>
    <div class="y">component</div>
  </div>
</template>

After defining the key to the very root element of the template you can solve this issue. You can see the static generated keys in Vue-Dev Tools(Browser) as well, so defining your own key attribute resolve the issue. Once you add your key attribute in template’s root element, you can see your defined keys in Vue-Dev Tools.

Please let me know your outcome on this.

[kimlisa]

I had the same warning using version 2.6.10. I had a component using three child functional components and it would give me this warning, so what I did was assign the root element for each functional component with a unique key from each other and the warning went away. Not sure if that was right though but it got rid of the error.