使用 vue 中的方法更新數據

Question

我是 Vue 的新手，我正在嘗試使用方法中的 function 更新表中使用的數據屬性。

我有一個填充數據的表：

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

所以我有一個按鈕：

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

其中調用了名為 randomize 的 function 內部方法：

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

}

這個 function 內部方法應該更新 data.inschrijfprijs 內部數據，以便從隨機化 function 的返回在數據表中可見：

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,
    },
  ]
}}

我將如何 go 關於這個？ 提前謝謝！

Answer 1

這是 function 將隨機值填充到您的數組中。 我不太確定要填充隨機字符串的data數組的哪個值。 所以，我舉一個例子。

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