Vue.js + jQuery输入掩码不起作用

Question

我尝试使用inputmask插件作为Vue.js指令，但是我得到了以下错误：

$(...).inputmask is not a function

在传递这个错误之后，我需要将输入值更新到模型(data.amount)。

下面是代码(JsFiddle：https://jsfiddle.net/rL09zg5c/3/)

//HTML
<div id="app" class="container">
  <h1>
    Vue {{ vueVersion }}
  </h1>
  <form>
    <h3>
Currency:
    </h3>
    <input type="text" v-model="amount" v-input-mask/>
        <h4>
        Entered: {{ amount }}
        </h4>
  </form>
</div>

//JS
onload = function() {
  Vue.directive('input-mask', {
    bind: function(el, obj, vModel) {
            $(el).inputmask({
        prefix: 'R$ ',
        alias: 'numeric',
        allowMinus: false,
        groupSeparator: '.',
        radixPoint: ',',
        autoGroup: true,
        digits: 2,
        digitsOptional: false,
        placeholder: '0',
        rightAlign: false,
      });
    }
  })

  var vm = new Vue({
    el: '#app',
    data: {
      vueVersion: Vue.version,
      amount: ""
    }
  });
}

谢谢。

Answer 1

我认为下面的代码会对你有所帮助。GitHub

用法：

Vue.use(Inputmask)

<input v-inputmask="'9999'">

<input v-inputmask="mask">