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