Vue/Jquery 覆盖双向数据绑定答案

【问题标题】：Vue/Jquery override two-way data bidningVue/Jquery 覆盖双向数据绑定
【发布时间】：2017-11-21 14:07:08
【问题描述】：

我在需要使用 jquery 覆盖的 Vue.js 组件中有一个输入。我需要使用 jquery 用电子邮件地址填写输入。当我按下填写电子邮件时，jQuery 将填充电子邮件输入。但是当我使用 V-model 时，它不会更新。有解决办法吗？

这是一个有效的 jsfiddle 示例 https://jsfiddle.net/s3b7f1ah/

这里是 HTML

<button id="push-email">Fill in email</button>
<br><br>
<div id="root">
  <label for="name">Name</label>
  <input type="text" name="name" id="name" v-model="name">

  <label for="name">Email</label>
  <input type="text" name="email" id="email" v-model="email">

  <br><br>
  <button  @click="proceed">next</button>
  <br><br>
  {{ name }} <br>
  {{ email }}
</div>

这里是 jQuery

//jQuery
$(function() {
  $('#push-email').click(function() {
    $('#email').val("john@example.com");
  });
});

这里是 vue 组件

//Vue
var app = new Vue({
  el: '#root',
  data: {
    name: '',
    email: '',
  },
  methods: {
    proceed: function () {

    }
  },
});

https://jsfiddle.net/s3b7f1ah/

【问题讨论】：

不要同时使用 jQuery 和 vue.js，这是一个非常糟糕的做法。
在这种情况下我不能。这是一个更大项目的简化问题。这是一个大型 jquery 项目，它返回填充此输入。

标签： javascript jquery vue.js vuejs2

【解决方案1】：

如果你真的被卡住了，最好的方法是在你的 vue 模型中添加一个事件监听器：

var app = new Vue({
  el: '#root',
  data: {
    name: '',
    email: '',
  },
  methods: {
    proceed: function () {

    },
    foo : function(event){
        this.email = event.target.value;
    }
  },
});

<input @change="foo" type="text" name="email" id="email" v-model="email">

这样就不用修改jQuery逻辑了。

更新 jsfiddle：https://jsfiddle.net/s3b7f1ah/1/

【讨论】：

【解决方案2】：

更改您的 jquery 代码以设置模型值，它将反映在输入字段中。

 //jQuery
 $(function() {
       $('#push-email').click(function() {
           app.email = 'john@example.com';
       });
 });

【讨论】：

【解决方案3】：

您可以编写一个指令来处理 jQuery 更改（只要 jQuery 发出一个）。如果 jQuery 只是设置值而不触发change 事件，你将永远看不到它。借用 Axnyff 的代码：

//Vue
var app = new Vue({
  el: '#root',
  data: {
    name: '',
    email: '',
  },
  methods: {
    proceed: function() {

    },
    foo: function(event) {
      this.email = event.target.value;
    }
  },
  directives: {
    onJqueryChange: {
      bind(el, binding) {
        $(el).change(binding.value);
      }
    }
  }
});


//Jquery
$(function() {
  $('#push-email').click(function() {
    $('#email').val("john@example.com").change();
  });
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="push-email">Fill in email</button>
<br>
<br>
<div id="root">
  <label for="name">Name</label>
  <input type="text" name="name" id="name" v-model="name">

  <label for="name">Email</label>
  <input v-on-jquery-change="foo" type="text" name="email" id="email" v-model="email">
  <br>
  <br>
  <button @click="proceed">next</button>
  <br>
  <br> {{ name }}
  <br> {{ email }}
</div>

【讨论】：