[Vuejs]-Vue.js, v-model outside main el

by

0đź‘Ť

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>

Leave a comment