Question

我在VueJS中有一个组件，该组件基于对象数组显示数据表。该组件如下所示：

<template>
  <div id="table">
    <p class="title">Data:</p>
    <v-data-table :headers="headers" :items="imported_data">
      <template slot="items" slot-scope="props">
        <td class="text-xs-left">{{props.item.name}}</td>
        <td class="text-xs-right">{{props.item.age}}</td>
      </template>
    </v-data-table>
  </div>
</template>

<script>
export default {
  props: {
    imported_data: {
      type: Array,
      required: true
    }
  },
  data: () => ({
    headers: [
      { text: "Name", value: "name" },
      { text: "Age", value: "age" }
    ]
  })
};
</script>

我可以通过执行<DataTableView :imported_data="this.dataset"/>来呈现此组件，其中this.dataset是填充我的数据表的对象数组。我的问题是，当我用另一个数据集重新初始化我的组件时，新数据集只是追加到旧数据集上，而不会用新数据集覆盖旧数据集。如何放置新数据以使imported_data道具被重置？

编辑：

imported_data中的数据是通过一个简单的GET请求从后端检索的：

axios
    .get("http://localhost:8888/getData")
    .then((res) => {
        this.dataset = res.data
    })

我在页面上有一个按钮，可以从后端再次获取新数据，但是“新”数据附加了我的“旧”数据。 DataTableView组件在按钮旁边加载，但直到通过this.imported_data条件填充v-if时才显示。

重新加载后如何在VueJS中重置组件的道具？

0 个答案: