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/

Answer 2

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

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

Answer 3

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

＆＃13;

//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();
  });
});

＆＃13;

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

＆＃13;

Vue / Jquery覆盖双向数据出价

3 个答案: