I'm new to Vue and I have a challenge regarding updating data properties used in a table through a function in methods.
The table is populated with the following code:
<v-data-table
:headers="headers"
:items="data"
:items-per-page="7"
outline
class="elevation-0"
></v-data-table>
Now, there is a button:
<v-btn
@click="randomize()"
>Randomize data</v-btn
>
This button triggers a function named randomize within the methods section:
methods: {
randomize: function() {
const math = Math.floor(Math.random() * (3000000 - 2000000) + 2000000);
const mathRounded = Math.round(math / 10000) * 10000;
const mathRoundedToString = mathRounded
.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
return "€" + mathRoundedToString;
}
}
The aim is for this method in methods to update the data.inschrijfprijs value within data. This would make the result of the randomize function visible inside the data table:
data() {
return {
headers: [
{
text: "Inschrijver",
align: "start",
sortable: false,
value: "inschrijver"
},
{ text: "Inschrijfprijs", value: "inschrijfprijs" },
],
data: [
{
inschrijver: "Inschrijver 1",
inschrijfprijs: 111,
},
{
inschrijver: "Inschrijver 2",
inschrijfprijs: 222,
},
{
inschrijver: "Inschrijver 3",
inschrijfprijs: 333,
},
]
}}
Any suggestions on how to achieve this task? Thank you!