v-for with data from mouted method

Question

I want generate form from data what I get from API, well that almost work... I mean I need comment all in v-for then save next uncomment this and save again... then my localserver show my generated form. It looks like HTML part is generate before my mounted method where I'm setting data inside object. Well foreach work on empty object and show nothing. Can I force my v-for to w8 on mouthed method? Or all I wrote is wrong and reason is different.

<template>
<div id="FormTemplate">
    <div v-for="filtr in this.AsocFilterArray[this.$props.Table]" :key="filtr">
        <span>{{ filtr.avilableOperators }}</span><br>
        <span>{{ filtr.type }}</span><br>
        <label :for="filtr.name">{{ filtr.displayName }}:</label>
        <input type="text" :name="filtr.name" class="form-control" v-if="filtr.type == String">
        <input type="date" :name="filtr.name" class="form-control" v-else-if="filtr.type == DateTime">
        <input type="search" :name="filtr.name" class="form-control" v-else>            
    </div>
</div>

export default {
name: "FormTemplate",
props: {
    Table: String,
},
data: function(){
    return {
        optionsAxios: {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'Authorization': 'Bearer ' + localStorage.getItem("user-token"),
            },
        },
        filters: {},
        AsocFilterArray: {}
    }
},
methods: {
    GetFilters: async function(){
        const URI = localStorage.getItem("URI") + "/api/filters";
        return axios.get(URI, this.optionsAxios);
    },
},
async mounted() {
    await this.GetFilters().then((result)=>{
        this.filters = result.data;
        this.filters.allFilters.forEach(filter => {
            this.AsocFilterArray[filter.type] = filter.elements;
        });
    }).catch(err=>{
        console.log(err);
    })
}

Answer 1

You could wrap the for loop in a template and check if the iterated object has properties. If so you can render it:

<template>
  <div id="FormTemplate">
    <template v-if="showFilter">
      <div v-for="filtr in AsocFilterArray[Table]" :key="filtr">
        <span>{{ filtr.avilableOperators }}</span
        ><br />
        <span>{{ filtr.type }}</span
        ><br />
        <label :for="filtr.name">{{ filtr.displayName }}:</label>
        <input
          v-if="filtr.type == String"
          type="text"
          :name="filtr.name"
          class="form-control"
        />
        <input
          v-else-if="filtr.type == DateTime"
          type="date"
          :name="filtr.name"
          class="form-control"
        />
        <input v-else type="search" :name="filtr.name" class="form-control" />
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "FormTemplate",
  props: {
    Table: String,
  },
  data() {
    return {
      optionsAxios: {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          Authorization: "Bearer " + localStorage.getItem("user-token"),
        },
      },
      filters: {},
      AsocFilterArray: {},
    };
  },
  methods: {
    GetFilters() {
      const URI = localStorage.getItem("URI") + "/api/filters";
      return axios.get(URI, this.optionsAxios);
    },
  },
  computed: {
    showFilter() {
      return Object.keys(this.AsocFilterArray).length;
    },
  },

  created() {
    this.GetFilters()
      .then((result) => {
        this.filters = result.data;
        this.filters.allFilters.forEach((filter) => {
          this.AsocFilterArray[filter.type] = filter.elements;
        });
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>