Question

我和VueJS合作了一段时间，这很棒。我已经能够将它与jQueryUI集成（对于一个看起来很旧的网站），我创建了一个datepicker组件，以及一个日期时间选择器组件，两者都正常工作。

现在我正在尝试创建一个简单的电话号码组件，它只是提供一个带有掩码的输入，这有助于电话号码格式。提供屏蔽的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>

这就是我所看到的：

依赖关系：

我在这里做错了吗？感谢。

Answer 1

你不需要你的jquery中的.find('.phone:eq(0)')，删除它似乎修复了屏蔽（如here所示），尽管这看起来似乎弄乱了Vue的数据捆绑。

在进行一些挖掘后，看起来这是known issue。

已解决here：

Vue是一个嫉妒的图书馆，你必须完全放弃它拥有你给它的DOM补丁（由你传递的东西定义 EL）。如果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/

不能在VueJS组件中使用jquery插件

1 个答案: