Question

我有一个循环数据，我想在单击按钮时将值推送/添加/更新到v-model 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

应该是

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的引用，以使组件具有响应性。

Answer 2

您需要使用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>

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

2 个答案: