There is an array of cards with content

 { id:1, note: "Text1"} { id:2, note: "Text2"}

Print this array into a template, note print to textarea and to div

 <textarea @keyup="setNote($event, card.id)" cols="34" rows="3">{{card.note}}</textarea> <div>{{card.note}}</div>

Also add a button, after clicking on which we will replace the array of cards

 test: function() { this.cards = [ { id:1, note: "Новый текст 1"}, { id:2, note: "Новый текст 2"}, ]; }

If you replace Text1 in the first textarea for example, with text1111 and click on the Test button, the first textarea will remain unchanged (text1111), although the text should be replaced with Новый текст 1 , the div changes

If the textarea not touched and click on Test , the text changes

Jsfiddle test

How to change the data in textarea when you click on the button?

    1 answer 1

    Use <textarea v-model="card.note"></textarea> instead of <textarea>{{card.note}}</textarea>