v-for с данными из метода mouted - PullRequest
Новая
       110

v-for с данными из метода mouted

0 голосов
/ 07 августа 2020

Я хочу сгенерировать форму из данных, которые я получаю от API, ну, это почти работает ... Я имею в виду, что мне нужно прокомментировать все в v-for , затем сохраните следующее раскомментируйте это и сохранить снова ... тогда мой локальный сервер покажет мою сгенерированную форму. Похоже, что часть HTML генерируется до моего смонтированного метода, в котором я устанавливаю данные внутри объекта. Хорошо, что foreach работает с пустым объектом и ничего не показывает. Могу ли я принудительно преобразовать мой v-for в w8 по методу рта? Или все, что я написал, неверно, и причина другая. 

<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);
    })
}

1 Ответ

1 голос
/ 07 августа 2020

Вы можете обернуть for l oop в шаблон и проверить, имеет ли повторяемый объект свойства. Если да, вы можете отобразить это: 

<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>
...