Как сбросить реквизиты компонента в VueJS после перезагрузки? - PullRequest
0 голосов
/ 26 декабря 2018

У меня есть компонент в 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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...