无法在 VueJS 组件中使用 jquery 插件

Question

我使用 VueJS 已经有一段时间了，它很棒。我已经能够将它与 jQueryUI 集成（对于一个看起来很旧的网站），并且我创建了一个 datepicker 组件和一个 datetime picker 组件，它们都可以正常工作。

现在我正在尝试创建一个简单的电话号码组件，它只是提供一个带有掩码的输入，有助于电话号码格式。提供屏蔽的 jquery 插件本身可以正常工作，但是如果我尝试屏蔽组件内的输入，它就不起作用。

这是 jsfiddle 中的示例代码：

Simple Masked Phone input component for vuejs 2.4.0 - jsfiddle

Javascript：

Vue.component('phone', {
  template: '#phone',
  props: {
    value : {
      type   : String,
      default: ''
    },
    mask: {
      type   : String,
      default: '(999) 999-9999'
    }
  },
  data: function() {
    return {
        internalValue: ''
    };
  },

    created: function() {
    this.internalValue = $.trim(this.value);
  },

  mounted: function() {
    $(this.$el).find('.phone:eq(0)').mask('(999) 999-9999');
  },

  methods: {
    updateValue: function (value) {
            this.$emit('input', value);
    }
  }
});

var vueapp = new Vue({
  el: '#content',
  data: {
    myphone: ''
  }
});

$('.phonex').mask('(999) 999-9999');

HTML：

<div id="content">
  <script type="text/x-template" id="phone">
    <input type="text" class="phone" v-model="internalValue" v-on:input="updateValue($event.target.value)" />
  </script>

  <label>Vue Phone</label>
  <phone v-model="myphone"></phone>
  <br />
  {{ myphone }}
  <br />

  <label>Simple Phone</label>
  <input type="text" class="phonex" />
</div>

这是我看到的：

依赖关系：

• jquery-2.2.4.min.js
• jquery.maskedinput.min.js (1.4.1)
• vue.js (2.4.0)

我在这里做错了什么吗？谢谢。

Answer 1

您的 jquery 中不需要 .find('.phone:eq(0)')，删除它似乎可以修复屏蔽（如 here 所示），尽管这似乎与 Vue 的数据绑定相混淆。

在进行更多挖掘之后，它看起来像是known issue。

地址为here：

从某种意义上说，Vue 是一个嫉妒的库，你必须完全放开它 拥有您提供给它的 DOM 补丁（由您传递给的内容定义 e)。如果 jQuery 对 Vue 管理的元素进行了更改，比如说， 给某事添加一个类，Vue 不会意识到这个变化并且是 将继续并在下一个更新周期覆盖它。

解决这个问题的方法是在元素上调用.mask 时添加事件处理程序。

例如：

mounted: function() {
  var self = this;
    $(this.$el).mask('(999) 999-9999').on('keydown change',function(){
        self.$emit('input', $(this).val());
    })
  },

这里是修复的问题：https://jsfiddle.net/vo9orLx2/