javascript - Vue/Jquery 重写双向数据绑定(bind)

Question

我在 Vue.js 组件中有一个输入，需要使用 jquery 覆盖它。我需要使用 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/

Answer 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/