使用 vue 中的方法更新数据

Question

我是 Vue 新手，我正在尝试使用方法中的函数更新表中使用的数据属性。

我有一个填充了数据的表格：

<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 的函数：

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

}

方法内部的这个函数应该更新 data.inschrijfprijs 内部数据，以便 randomize 函数的返回在数据表中可见：

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

我该怎么做呢？提前谢谢！

Answer 1

这是将随机值填充到数组中的函数。 我不太确定您要填充随机字符串的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;
}