CODEWITHSUNDEEP
vue.jsvuejs2
Jay85
Jay85

Reputation: 136

How to bind v-model from input in one div to another div or component

I have my input field in one div, and will have label in another div (as sidebar in my application). I want to update label in sidebar, as I type in input on first div.

I am happy to create second div a component if that's the way. I was reading online, and it was said we could use props to pass data to component. But I am not able to link input field to component. Please find my code as below:

var app = new Vue({
  el: '#div1',
  data: {
    message: ''
  }
})

Vue.component('testp', {
  props: ['message'],
  template: '<p>Message is: {{ message }}</p>'
})

var div2 = new Vue({
   el: '#div2'
});
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div1">
	<input v-model="message" placeholder="edit me">

</div>

<div id="div2">
	<testp></testp>
</div>


</body>
</html>

Upvotes: 0

Views: 9703

Answers (2)

Ashwin Bande
Ashwin Bande

Reputation: 3053

As Pointed in Comment You have no reason to have two separate Vue instance and the First Answer is correct. But in some cases where you really need to have multiple Vue instances, you can actually use them in the following manner.

var app = new Vue({
  el: '#div1',
  data: {
    message: ''
  }
})

Vue.component('testp', {
  props: ['message'],
  template: '<p>Message is: {{ message }}</p>'
})

var div2 = new Vue({
   el: '#div2',
  computed: {
    newMessage() {
      return app.message;
    }
  },
});

Html

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id="div1">
        <input v-model="message" placeholder="edit me">
    </div>
    <div id="div2">
        <testp :message="newMessage"></testp>
    </div>
    </body>
    </html>

Please observe the computed value newMessage is actually getting its value form a different Vue instance (app) and it is also reactive. Therefore whenever the value in first Vue instance changes, it is updated in another Vue instance.

Codepen: https://codepen.io/ashwinbande/pen/xMgQQz

Upvotes: 2

Terry
Terry

Reputation: 66103

Like I have pointed out in my comments, there is no reason for you to use two separate Vue instances. What you can do is simply wrap everything within an app container, e.g. <div id="#app">, and then instantiate your VueJS instance on that element instead.

Then, you can use v-bind:message="message" on the <testp> component to pass in the message from the parent. In this sense #div1 and #div2 are used entirely for markup/decorative purposes and are not used as VueJS app containers in your code.

Vue.component('testp', {
  props: ['message'],
  template: '<p>Message is: {{ message }}</p>'
});

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  }
});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <div id="div1">
    <input v-model="message" placeholder="edit me">
  </div>

  <div id="div2">
    <testp v-bind:message="message"></testp>
  </div>
</div>

Upvotes: 0

Related Questions