We don't have to write the key for all our elements if we already have some data available. Another way we could write the same app, but without repeating the element is as follows:
<transition name="fade"> <p :key="transformation">{{emoji}}{{transformation}}</p></transition>
This, of course, means that we have to provide a sensible value for the transformation and emoji variables, depending on the number of kisses.
To do this, we will tie them to computed properties:
computed: { transformation () { if (this.kisses < 3) { return 'frog' } if (this.kisses >= 3 && this.kisses <= 5) { return 'princess' } if (this.kisses > 5) { return 'santa' } }, emoji () { switch (this.transformation) { ...
