Как получить данные перед рендерингом компонента?

Есть компонент, который выводит результаты в виде таблицы. Проблема в том, что сначала рендерится пустая таблица, а уже после добавляются данные. Как сделать вывод таблицы после получения данных?

Компонент

    <template>
    <div>
      <el-table :data="getAllBrands">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="Name"></el-table-column>
        <el-table-column>
          <template slot-scope="props">
            <el-button type="danger" icon="el-icon-delete" @click="deleteBrand(props.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
    import { mapGetters, mapActions } from "vuex";
    export default {
      name: "BrandsTable",
      computed: {
        ...mapGetters(["getAllBrands"])
      },
      methods: {
        ...mapActions(["requestBrands", "deleteBrand"])
      },
      mounted: function() {
        this.requestBrands();
      }
    };
</script>

Vuex модуль

    import store from "..";

export default {
  state: {
    all: []
  },
  getters: {
    getAllBrands: state => {
      return state.all;
    }
  },
  mutations: {
    setBrands(state, brands) {
      state.all = brands;
    },
    deleteBrandFromList(state, brandId) {
      state.all = state.all.filter(b => b.id !== brandId);
    }
  },
  actions: {
    async requestBrands(ctx) {
      await axios
        .get("/admin/brands", {
          _token: store.state.token
        })
        .then(function(response) {
          ctx.commit("setBrands", response.data.brands);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    async deleteBrand(ctx, id) {
      await axios
        .post("/admin/brands/" + id, {
          _token: store.state.token,
          _method: "DELETE"
        })
        .then(function() {
          ctx.commit("deleteBrandFromList", id);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};

Ответы (1 шт):

Автор решения: Михаил Лелякин
    <template>
    <div>
      <el-table v-if="getAllBrands.length" :data="getAllBrands">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="Name"></el-table-column>
        <el-table-column>
          <template slot-scope="props">
            <el-button type="danger" icon="el-icon-delete" @click="deleteBrand(props.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

Вы можете сделать проверку на длину массива, который возвращается геттером getAllBrands. Либо сделать boolean геттер в Vuex и выполнять проверку по нему.

→ Ссылка