how to push value to v-model on-click button

Question

I have a looping data and I want to push/add/update the value to v-model DataJournals.Description when I click the button.

Here is what I tried.

template

<tr v-for="(DataJournals, index) in DataJournal" :key="DataJournals.value">
    <td>
        <textarea class="form-control" id="termsofdelivery" v-model="DataJournals.Description" rows="3" v-bind:disabled="DataJournals.SignSave == 1 ? true : false"></textarea>
    </td>
    <a href="javascript:;" v-on:click="greet(DataJournals.id, index)" class="btn btn-sm btn-primary">Speech</a>
</tr>

My method

greet: function (event, id, index) {
    this.DataJournal.Description = 'asddsaasddsaasddsa'
}

When I check console.log its working but not push to v-model.

Solution 1

It should be

greet: function (event, id, index) {
    this.DataJournal[index].Description = 'asddsaasddsaasddsa'
    this.DataJournal = JSON.parse(JSON.stringify(this.DataJournal))
}

In your html code

v-on:click="greet($event, DataJournals.id, index)"

You need to update reference to this.DataJournal to make component reactive.

Solution 2

You need to use index to update data and it is better to render a link to inside td element

new Vue({
  el: "#app",
  data: {
    DataJournal: [
      {value:1, SignSave:1,id:1,Description:""},
      {value:2, SignSave:2,id:2,Description:""},
      {value:3, SignSave:3,id:3,Description:""},      
    ]
  },
  methods: {
   greet: function(id,index) {
    this.DataJournal[index].Description = "test";
   }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table>
<tbody>
<tr v-for="(DataJournals, index) in DataJournal" :key="DataJournals.value">
    <td>
        <textarea class="form-control" id="termsofdelivery" v-model="DataJournals.Description" rows="3" v-bind:disabled="DataJournals.SignSave == 1 ? true : false"></textarea>
        <a href="javascript:;" v-on:click="greet(DataJournals.id, index)" class="btn btn-sm btn-primary">Speech</a>
    </td>
    
</tr>
</tbody>
</table>
</div>