vue通过v-model绑定的数据可以通过jquery的val()赋值吗？

Question

<div id="app">
  <input v-model="name">
  <p>{{name}}</p>
  <button id="id1">
  添加
  </button>
</div>

new Vue({
  el: "#app",
  data: {
    name:''
  },
  methods: {
      toggle: function(todo){
        todo.done = !todo.done
    }
  }
})
$('#id1').click(function() {
  $('input').val('12345')
})

demo在这http://jsfiddle.net/7wpadk6e/
vue中引入了一个jquery的时间插件，点击那个插件通过jquery的val（）给input赋值，
我想赋值的同时vue绑定的数据也赋上值，这样可行吗？

Answer 1

var vm = new Vue({
  el: "#app",
  data: {
    name:''
  },
})
$('#id1').click(function() {
  vm.$data.name = '12345'
})

Answer 2

用了vue还用jq的都是耍流氓，vue也有对应的时间插件，没必要用jq的哇

Answer 3

难以想象 还有这种操蛋的操作

Answer 4

直接在你的click事件里面this.name不好吗

Answer 5

既然用vue了 vue有点击事件 直接用vue的就好了 @click="function" 没必要用jq的点击事件吧
我也是用vue+jq的 不过是为了jq的插件

Answer 6

可以不使用v-model来绑定 ,使用
<input :value="name" @input=changeValue($event)>

使用 changeValue(e){this.name=e.target.value}来修改bind输入的值
使用jq自定义方法来触发修改 this.name 比如 $('#a').click(function(){vm.name = 'your value'})酱紫应该可以的

Answer 7

这操作太秀了~

Answer 8

可以的，但是jQuery给input赋值的时候不会触发change事件所以要在赋值后需要手动触发一次。

$('#id1').click(()=> {
  $('input').val('12345');
  $("input")[0].dispatchEvent(new Event('input'))
})

详细看我写的代码（图个方便所以直接用了这个模板，看的懂就行。代码在App.vue 文件中）

这个是stackoverflow上一个关于手动触发事件的回答
https://stackoverflow.com/que...

虽然可以实现，但是我觉得吧，既然选择了vue，就勇敢放弃jQuery吧