fix: Show 0 as a valid key in the component tree, closes #827 (#828)

* #827: Show 0 as a valid key in the component tree

* Delete spaces

* test(e2e): 0 key


Co-authored-by: Guillaume Chau <[email protected]>

Author: 2 people

cypress/integration/components-tab.js

@@ -28,6 +28,14 @@ suite('components tab', () => {
     })
   })
 
+  it('should display 0 key', () => {
+    cy.get('.tree > .instance .instance:nth-child(2)').within(() => {
+      cy.get('.arrow').click().then(() => {
+        cy.get('.instance:nth-child(3) .attr').contains('key=0')
+      })
+    })
+  })
+
   it('should detect components in transition', () => {
     cy.get('.tree > .instance .instance:nth-child(7)').within(() => {
       cy.get('.arrow').click().then(() => {

shells/dev/target/Target.vue

@@ -27,7 +27,7 @@
       <Functional
         name="Embed component"
       >
-        <Other />
+        <Other :key="0" />
       </Functional>
       <Functional
         name="Embed functional component"

src/devtools/views/components/ComponentInstance.vue

@@ -146,7 +146,7 @@ export default {
     },
 
     componentHasKey () {
-      return !!this.instance.renderKey && this.instance.renderKey !== UNDEFINED
+      return (this.instance.renderKey === 0 || !!this.instance.renderKey) && this.instance.renderKey !== UNDEFINED
     }
   },