Как получить объект массивов прежде, чем сработает computed()?

Question

[Алекс Фил]

Столкнулся с проблемой ошибки рендеринга, я получаю с сервера json объект с кучей массивов, но на этапе когда нужно выводить в шаблон возникает ошибка.

Вот мой код:

input(type='text'  v-model="searchString")
.reports
	.reports__item(v-for='report in reportsFilters')

let reportsApp = new Vue({
		el: reportsEl,
		data: {
			searchString: '',
			reports: {},
		},
		methods: {
			getReportsArr() {
				let axiosUrl = this.$el.getAttribute('data-xhr');

				axios.get(axiosUrl).then(response => {
					let data = response.data;

					for (let i = 0; i < data.length; i++) {
						let reportsArr = data[i].reportsList;

						this.reports = reportsArr;
					}
				}).catch(e => {
					this.errors.push(e);
				})
			}
		},
		beforeMount() {
			this.getReportsArr();
		},
		computed: {
			reportsFilters() {
				let self=this;

				return this.reports.filter((report) => {
              return report.reportName.toLowerCase().indexOf(self.searchString.toLowerCase())>=0;
              });
			}
		}
	})

Comments

[Dartess]

Не спец во Vue, разве нельзя в каком-нибудь beforeCreate задать просто this.reports = [], чтобы в начале отрендерился пустой массив, а когда данные прийдут, вывод обновится с уже корректными данными?

Answer 1

[Анатолий Жаров]

При инициализации в data.reports пустой объект, у него нет метода filter, вызываемого в computed.reportsFilter. Необходимо сделать пустым массивом

Comments

[Алекс Фил]

Большое спасибо! Как всегда все простое еще проще, чем кажется))