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

在Vue中使用方法更新数据

1 个答案: