Как связать v-модель из входных данных в одном div или другом div или компоненте - PullRequest
Новая
       0

Как связать v-модель из входных данных в одном div или другом div или компоненте

0 голосов
/ 31 января 2019

У меня есть поле ввода в одном div, и метка в другом div (как боковая панель в моем приложении).Я хочу обновить метку на боковой панели, так как я ввожу ввод для первого div.

Я рад создать второй div компонент, если это так.Я читал в Интернете, и было сказано, что мы можем использовать реквизит для передачи данных в компонент.Но я не могу связать поле ввода с компонентом.Пожалуйста, найдите мой код, как показано ниже: 

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>

Ответы [ 2 ]

0 голосов
/ 31 января 2019

Как указано в комментарии. У вас нет причин иметь два отдельных экземпляра Vue, и первый ответ правильный.Но в некоторых случаях, когда вам действительно нужно иметь несколько экземпляров Vue, вы можете использовать их следующим образом. 

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>

Обратите внимание на вычисление значение newMessage фактически получает свое значение из другого экземпляра Vue (app), и оно также реагирует .Поэтому, когда значение в первом экземпляре Vue изменяется, оно обновляется в другом экземпляре Vue.

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

0 голосов
/ 31 января 2019

Как я уже отмечал в своих комментариях, у вас нет причин использовать два отдельных экземпляра Vue.Что вы можете сделать, это просто обернуть все в контейнере приложения, например, <div id="#app">, а затем создать экземпляр вашего экземпляра VueJS для этого элемента.

Затем вы можете использовать v-bind:message="message" в компоненте <testp> дляпередать message от родителя.В этом смысле #div1 и #div2 используются исключительно для разметки / декоративных целей и не используются в качестве контейнеров приложений VueJS в вашем коде. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...