如何将值推入v-model单击按钮

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.

Answer 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.

Answer 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>