Auto-generate unique key so that Vue will diff the component/directive elements correctly. This fixes Polyconseil#29

Author: kennyki

src/component.js

@@ -1,4 +1,5 @@
 import translate from './translate'
+import uuid from './uuid'
 
 
 /**
@@ -74,6 +75,12 @@ export default {
   },
 
   render: function (createElement) {
+    // this is to fix the problem of usage with v-if, see #29
+    // we should auto-generate unique key if user hasn't define one
+    if (!this.$vnode.key) {
+      this.$vnode.key = uuid()
+    }
+
     // The text must be wraped inside a root HTML element, so we use a <span> (by default).
     // https://github.com/vuejs/vue/blob/a4fcdb/src/compiler/parser/index.js#L209
     return createElement(this.tag, [this.translation])

src/directive.js

@@ -1,6 +1,7 @@
 import interpolate from './interpolate'
 import translate from './translate'
 import { _Vue } from './localVue'
+import uuid from './uuid'
 
 
 const updateTranslation = (el, binding, vnode) => {
@@ -49,6 +50,12 @@ export default {
 
   bind (el, binding, vnode) {
 
+    // this is to fix the problem of usage with v-if, see #29
+    // we should auto-generate unique key if user hasn't define one
+    if (!vnode.key) {
+      vnode.key = uuid()
+    }
+
     // Get the raw HTML and store it in the element's dataset (as advised in Vue's official guide).
     // Note: not trimming the content here as it should be picked up as-is by the extractor.
     let msgid = el.innerHTML

src/uuid.js

@@ -0,0 +1,15 @@
+/* eslint-disable */
+
+// from https://gist.github.com/jcxplorer/823878
+export default function uuid() {
+  var uuid = "", i, random;
+  for (i = 0; i < 32; i++) {
+    random = Math.random() * 16 | 0;
+
+    if (i == 8 || i == 12 || i == 16 || i == 20) {
+      uuid += "-"
+    }
+    uuid += (i == 12 ? 4 : (i == 16 ? (random & 3 | 8) : random)).toString(16);
+  }
+  return uuid;
+}

test/specs/component.spec.js

@@ -168,6 +168,23 @@ describe('translate component tests', () => {
   //   }).to.throw('`translate-n` and `translate-plural` attributes must be used together: %{ n } car.')
   // })
 
+  it('supports conditional rendering such as v-if, v-else-if, v-else', (done) => {
+    Vue.config.language = 'en_US'
+    let vm = new Vue({
+      template: `
+      <translate v-if="show">Pending</translate>
+      <translate v-else>Hello %{ name }</translate>
+      `,
+      data: {show: true, name: 'John Doe'},
+    }).$mount()
+    expect(vm.$el.innerHTML).to.equal('Pending')
+    vm.show = false
+    vm.$nextTick(function () {
+      expect(vm.$el.innerHTML).to.equal('Hello John Doe')
+      done()
+    })
+  })
+
 })
 
 describe('translate component tests for interpolation', () => {

test/specs/directive.spec.js

@@ -161,4 +161,21 @@ describe('translate directive tests', () => {
     })
   })
 
+  it('supports conditional rendering such as v-if, v-else-if, v-else', (done) => {
+    Vue.config.language = 'en_US'
+    let vm = new Vue({
+      template: `
+      <div v-if="show" v-translate>Pending</div>
+      <div v-else v-translate>Hello <strong>%{ name }</strong></div>
+      `,
+      data: {show: true, name: 'John Doe'},
+    }).$mount()
+    expect(vm.$el.innerHTML).to.equal('Pending')
+    vm.show = false
+    vm.$nextTick(function () {
+      expect(vm.$el.innerHTML).to.equal('Hello <strong>John Doe</strong>')
+      done()
+    })
+  })
+
 })