Vue.js обрабатывает данные еще не загружен
Я пытаюсь обдумать лучший способ сделать что-то в Vue и немного застрять, когда дело доходит до использования данных, которые не были загружены.
Я нахожусь в процессе создания представления 'show' для ресурса, который загружается через vue-apollo, и форма состоит из двух компонентов: компонента формы и компонента 'edit' (форма разделяется между new и edit).
Моя форма выглядит примерно так
<template lang="pug">
form
input(v-model='model.name')
input(v-model='model.description')
</template>
<script>
import clone from 'ramda';
export default {
data() {
return {
model: clone(this.value),
};
},
};
</script>
И "редактировать" компонент, как это
<template lang="pug">
resource-form(v-model='resource')
</template>
<script>
import gql from 'graphql-tag';
export default {
apollo: {
resource() {
return gql'{
resource(id: ${this.$route.params.id}) {
name
description
}
}';
}
}
data() {
return {
model: clone(this.value),
};
},
};
</script>
Когда страница загружается, я получаю кучу ошибок о невозможности прочитать свойства 'name' и 'description' undefined, что имеет смысл, учитывая resource
не устанавливается при начальной загрузке страницы, но как лучше всего справиться с этим?
Должен быть более чистый способ обращения с ним, чем постоянная проверка model
нулевой.