使用 vue 中的方法更新数据

Question

I'm new to Vue and I'm trying to update data properties that are used in a table using a function in methods.

I have a table which gets populated with data:

<v-data-table
  :headers="headers"
  :items="data"
  :items-per-page="7"
  outline
  class="elevation-0"
></v-data-table>

So I have a button:

<v-btn
  @click="randomize()"
  >Randomize data</v-btn
>

Which calls a function named randomize inside methods:

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

}

This function inside methods should update the data.inschrijfprijs inside data so that the return from the randomize function is 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,
    },
  ]
}}

How would I go about this? Thx in advance!

Answer 1

Here's the function that will fill random values to your array. I'm not so sure to which value of the data array that u want to fill the random string. So, I make an example of out it.

randomize: function() {
  this.data.forEach((val) => {
    val.inschrijfprijs = this.randomString();
  })
},
randomString() {
    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;
}