как подтолкнуть значение к кнопке v-модели по нажатию

Question

У меня есть циклические данные, и я хочу нажать / добавить / обновить значение v-модели DataJournals.Description, когда я нажимаю кнопку.

Вот то, что я пробовал.

шаблон

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

Мой метод

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

Когда я проверяю console.log, он работает, но не нажимает на v-модель.

Answer 1

Вам необходимо использовать index для обновления данных, и лучше сделать ссылку на внутренний элемент td

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>

Answer 2

Это должно быть

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

В вашем HTML-коде

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

Вам необходимо обновить ссылку на this.DataJournal, чтобы сделать компонент реактивным.