如何使用Vue.js 2使autoNumeric正常工作？

Question

我正在尝试创建一个Vue.js 2指令，该指令在声明的输入上激活autoNumeric jquery插件。

例如，以下输入将通过vue指令v-cdz-numeric激活autoNumeric插件，链接的v-model为a：

<input type="text" v-cdz-numeric v-model.number="a">

将输入掩码插件（即autoNumeric）与提供数据绑定的框架混合时，棘手的部分是它们通常不会很好地混淆;

• 通常，input和change事件不再发送（参见events ok with pure autoNumeric，没有angular或vue.js的事件），
• 更重要的是，框架依赖于其自己的内部变量来保持DOM值同步。这意味着虽然输入掩码插件（autoNumeric）只更改DOM值，但您必须特别注意使Vue.js知道此更改（因此手动更改相关v-model的值）。

总而言之，对于给定的输入，您必须处理两个变量;真正的DOM值和框架值。

现在，为了保持清洁，我想在v-model中仅保留未格式化的值（注意：如果我在格式化值v-model，一切正常。）

因此，每当用户在输入中输入一些字符时，我都会使用来自autoNumeric 的未格式化值来更新Vue.js v-model（然后所有地狱都会松动）

function getUnformattedValue() {
    //This returns the raw unformatted value
    return Number(self.jQueryElement.autoNumeric('get'));
}

function updateValue(event) {
    let rawValue = getUnformattedValue();

    //Update the v-model value attached to the element
    self[vModelName] = rawValue; //DO NOT work when setting the raw unformatted value
    //self[vModelName] = el.value; //Works fine for the formatted value
}

问题在于这样做会使Vue.js立即将DOM输入值更新为原始无格式值，这不是预期的结果。

我的问题是：有没有办法让autoNumeric管理的输入很好地与Vue.js一起播放，这样每次用户输入一些数字时，v-model都保留在将与原始未格式化值同步？

比照codepen上的实例。

tl; dr ：如何使用autoNumeric和Vue.js 2，以便v-model始终保留无格式值，而不会干扰格式化用户输入