Javascript Vue/Jquery覆盖双向数据绑定

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

下面是一个正在工作的JSFIDLE示例

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

这是vue组件

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

    }
  },
});

---

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

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

---

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

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

---

如果您确实陷入困境，最好的方法是在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">

var-app=新的Vue({
el:'根'，
数据：{
名称：“”，
电子邮件：“”，
},
方法：{
继续：函数（）{
},
foo：函数（事件）{
this.email=event.target.value；
}
},
});

这样，您就不必修改jQuery逻辑

---

更新的JSFIDLE:

如果您真的陷入困境，最好的方法是在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">

var-app=新的Vue({
el:'根'，
数据：{
名称：“”，
电子邮件：“”，
},
方法：{
继续：函数（）{
},
foo：函数（事件）{
this.email=event.target.value；
}
},
});

这样，您就不必修改jQuery逻辑

---

更新的JSFIDLE:

您可以编写一个指令来处理jQuery更改（只要jQuery发出一个指令）。如果jQuery只是设置值而没有触发

change

事件，您将永远看不到它。从Axnyff借用代码：

//Vue
var app=新的Vue({
el:'根'，
数据：{
名称：“”，
电子邮件：“”，
},
方法：{
继续：函数（）{
},
foo：函数（事件）{
this.email=event.target.value；
}
},
指令：{
onJqueryChange：{
绑定（el，绑定）{
$（el）.change（binding.value）；
}
}
}
});
//Jquery
$（函数（）{
$（“#推送电子邮件”）。单击（函数（）{
$（'#email'）.val（“john@example.com）更改（）；
});
});

填写电子邮件




名称
电子邮件




下一个



{{name}}

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


//Vue
var app=新的Vue({
el:'根'，
数据：{
名称：“”，
电子邮件：“”，
},
方法：{
继续：函数（）{
},
foo：函数（事件）{
this.email=event.target.value；
}
},
指令：{
onJqueryChange：{
绑定（el，绑定）{
$（el）.change（binding.value）；
}
}
}
});
//Jquery
$（函数（）{
$（“#推送电子邮件”）。单击（函数（）{
$（'#email'）.val（“john@example.com）更改（）；
});
});

填写电子邮件




名称
电子邮件




下一个



{{name}}

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