vue.js，主要el外部的v模型

Question

Is there any way to bind the v-model input from outside of the main el? I will use an example from the vue website:

new Vue({
   el: '#demo',
   data: {
      message: 'Hello Vue.js!'
   }
})


<div id="demo">
   <p>{{message}}</p>
   <input v-model="message">
</div>

<input v-model="message"> // <- how to bind this

Answer 1

Almost anything can be done if you don't mind hacky solutions!

One way to make this work using jQuery, is to start the "message" input inside the Vue object's scope, then move it after the object is loaded.

new Vue({
   el: '#demo',
   data: {
      message: 'Hello Vue.js!'
   },
   ready: function(){
      $(this.$els.msg).appendTo('#new-location');
   }
})


<div id="demo">
   <p>{{message}}</p>
   <input v-model="message" v-el:msg />
</div>
<div id="new-location">
<!-- target location -->
</div>