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 нулевой.

0 ответов

Другие вопросы по тегам