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

Question

[Yevhenii K]

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

<template>
  <div>
    <!-- <p>Count: {{ brandsCounter }}</p> -->
    <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);
        });
    }
  }
};

Answer 1

[Илья Хребет]

//
<ElTable
  v-if="getAllBrands.length > 0"
  :data="getAllBrands"
>
//

Answer 2

[Дима Паутов]

<el-table
  v-if="getAllBrands.length"
  :data="getAllBrands"
>

Comments

[Yevhenii K]

Илья Хребет, Дима Турков, Таблица фреймворка проверяет переменную на наличие данных и выводит данные или "No data". Ваш вариант дублирует данный функционал.

[Илья Хребет]

Женя К, каким образом компонент может отображать "No data" в том случае, когда он не подключается по условию v-if?

[Yevhenii K]

Илья Хребет, Если getAllBrands пустой массив, выводиться таблица с 1 строкой No data.

[Илья Хребет]

Женя К, какое ожидаемое поведение, уточните еще раз?

[Yevhenii K]

Илья Хребет,
Сейчас:
Выводится пустая таблица (так как getAllBrands пустой)
-> через ~ секунду выводятся данные полученные через ajax.

Желаемый:
Дождаться выполнения action requestBrands, мутации и т.д
-> Впервые отобразить таблицу

[Дима Паутов]

Женя К, ну так и используйте v-if. Таблица вообще не отрендерится, пока не будет данных. По умолчанию таблица рендерится, но с строкой no-data.

[Константин Тимошено]

Можно как вариант props использовать.