У меня есть компонент в 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
извлекаются из бэкэнда с помощью простого GETrequest:
axios
.get("http://localhost:8888/getData")
.then((res) => {
this.dataset = res.data
})
У меня есть кнопка на странице, которая снова получает новые данные из моего бэкэнда, но «новые» данные добавляют мои «старые» данные.Компонент DataTableView загружается вместе с кнопкой, но не отображается до тех пор, пока this.imported_data
не будет заполнен условным условием v-if
.