Vue 2，如何将数据绑定到“数据绑定”的元素

【问题标题】：Vue 2, how to data bind to an element that is "data bound"Vue 2，如何将数据绑定到“数据绑定”的元素
【发布时间】：2019-03-15 21:46:49
【问题描述】：

我为此创建了一个 jsfiddle：

JS Fiddle

基本上我有三个文本区域。当您在第一个输入副本时，它应该绑定到第二个，这也将流向第三个。

<div id="app">
<textarea v-model="first"></textarea>

<textarea v-model="second">{{first}}</textarea>
 <textarea>{{ second }}</textarea>

【问题讨论】：

第一个、第二个和第三个不是同一个数据模型有什么原因吗？
是的，这些是动态的。但也许这仍然有效？

标签： javascript vue.js data-binding vuejs2

【解决方案1】：

您可以使用watch 属性来捕捉first 值的任何变化并将其分配给second 等等：

new Vue({
  el: '#app',
  data: {
    first: '',
    second: '',
    third:''
  },
  watch:{
     first(val){
     this.second=val;
     },
        second(val){
     this.third=val;
     }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
<textarea v-model="first"></textarea>


<textarea v-model="second" ></textarea>
  <p>2 >> {{ second }}</p>
  <textarea v-model="third" ></textarea>
   <p>3 >> {{ third }}</p>
</div>

【讨论】：