getting v-model value updated when clicking button

Question

getting v-model value updated when clicking button

How can I update the value of v-model DataJournals.Description in a looping data when a button is clicked?

This is what I have attempted:

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

Although console.log shows that it is working, the value is not being pushed to the v-model.

javascript vue.js vuejs2 vue-component

Answer 1

Answer №1

Remember to

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

In the HTML document

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

Ensure you update the reference to this.DataJournal for the component to react properly.

Answer 2

Remember to

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

In the HTML document

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

Ensure you update the reference to this.DataJournal for the component to react properly.

Answer 3

Answer №2

Using the index is crucial for updating data, and it's recommended to include a link within the 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>

Answer 4

Using the index is crucial for updating data, and it's recommended to include a link within the 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>

getting v-model value updated when clicking button

Answer №1

Answer №2

Similar questions

Exploring the Concept of Callbacks in JavaScript

Tips for arranging images in a horizontal layout using FlatList in React Native

Using Material-UI with @emotion/cache in SSR results in consistently empty cache

Retrieving data from a file results in receiving blank strings

A message appeared in the console warning about Vue using canvas-datagrid

"Encountering a problem with posting API requests using Express

Implementing dynamic checkbox values depending on a selection from a dropdown menu in Angular

The onChange function in Material UI Text Field is preventing users from inputting additional values

EJS functionality is operational, however, the HTML content is not displaying

What is the best way to turn a calendar table's <td> elements into interactive form elements?

The div that scrolls gracefully within its boundaries

Choose an option from a dropdown menu using JavaScript

The knockout.js subscribe function isn't activating during the initial set

Evaluate the functionality of an Angular controller method that interacts with the Document Object Model (

Is it possible to create a pie chart using Chart.js with data fetched through an Ajax HTTP GET

Error message: The Bootstrap .dropdown() method failed because it encountered an "Uncaught TypeError: undefined is not a function"

Clicking on a button in the Shield UI Grid Toolbar will apply filters to

Submitting with enter key on typeahead suggestions

Guide to updating information in Firestore using Node.js, embedded in a map array

Adjusting the text color for select values within a <td> element