Add interpolation values to missing handler

gitbook/en/directive.md

@@ -100,7 +100,7 @@ You can **flexibly** use mustash syntax `{{}}` in templates and also computed pr
 `v-t` is a custom directive. It has the following pros and cons:
 
 #### Pros
-`v-t` has **better performance** than the `$t` method due to its cache with the custom directive, when translated once. Also, pre-translation is possible with the Vue compiler module which was provided by [`vue-i18n-extentions`](https://github.com/kazupon/vue-i18n-extensions). Therefore it's possible to make **more performance optimizations**.
+`v-t` has **better performance** than the `$t` method due to its cache with the custom directive, when translated once. Also, pre-translation is possible with the Vue compiler module which was provided by [`vue-i18n-extensions`](https://github.com/kazupon/vue-i18n-extensions). Therefore it's possible to make **more performance optimizations**.
 
 #### Cons
 `v-t` can not be flexibly used like `$t`, it's rather **complex**. The translated content with `v-t` is inserted into the `textContent` of the element. Also, when you use server-side rendering, you need to set the [custom directive](https://github.com/kazupon/vue-i18n-extensions#directive-v-t-custom-directive-for-server-side) to `directives` option of  the `createRenderer` function.

src/index.js

@@ -169,10 +169,10 @@ export default class VueI18n {
   _getDateTimeFormats (): DateTimeFormats { return this._vm.dateTimeFormats }
   _getNumberFormats (): NumberFormats { return this._vm.numberFormats }
 
-  _warnDefault (locale: Locale, key: Path, result: ?any, vm: ?any): ?string {
+  _warnDefault (locale: Locale, key: Path, result: ?any, vm: ?any, values: any): ?string {
     if (!isNull(result)) { return result }
     if (this._missing) {
-      this._missing.apply(null, [locale, key, vm])
+      this._missing.apply(null, [locale, key, vm, values])
     } else {
       if (process.env.NODE_ENV !== 'production' && !this._silentTranslationWarn) {
         warn(
@@ -277,7 +277,7 @@ export default class VueI18n {
           linkPlaceholder, host, interpolateMode, values
         )
       }
-      translated = this._warnDefault(locale, linkPlaceholder, translated, host)
+      translated = this._warnDefault(locale, linkPlaceholder, translated, host, ...values)
 
       // Replace the link with the translated
       ret = !translated ? ret : ret.replace(link, translated)
@@ -335,7 +335,7 @@ export default class VueI18n {
       if (!this._root) { throw Error('unexpected error') }
       return this._root.t(key, ...values)
     } else {
-      return this._warnDefault(locale, key, ret, host)
+      return this._warnDefault(locale, key, ret, host, ...values)
     }
   }
 
@@ -353,7 +353,7 @@ export default class VueI18n {
       if (!this._root) { throw Error('unexpected error') }
       return this._root.i(key, locale, values)
     } else {
-      return this._warnDefault(locale, key, ret, host)
+      return this._warnDefault(locale, key, ret, host, ...values)
     }
   }
 

test/unit/missing.test.js

@@ -50,4 +50,28 @@ describe('missing', () => {
       i18n.t('foo.bar.buz')
     })
   })
+
+  describe('i18n missing values', () => {
+    it('should receive the values for interpolation', done => {
+      const testValues = {
+        foo: 'bar',
+        num: 1234
+      }
+
+      const missing = (locale, key, vm, values) => {
+        assert.equal('en', locale)
+        assert.equal('cannot.find', key)
+        assert.equal('bar', values.foo)
+        assert.equal(1234, values.num)
+        done()
+      }
+
+      const i18n = new VueI18n({
+        locale: 'en',
+        missing
+      })
+
+      i18n.t('cannot.find', testValues)
+    })
+  })
 })