vue.js - Vue.js 处理尚未加载的数据

Question

我试图了解在 Vue 中做事的最佳方式，并且在使用尚未加载的数据时遇到了一些困难。

我正在为通过 vue-apollo 加载的资源创建一个“显示”视图，表单由两个组件组成：表单组件和“编辑”组件（表单在新建和编辑之间共享）。

我的表格看起来有点像这样

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

当页面加载时，我收到一堆关于无法读取未定义的属性“名称”和“描述”的错误，这是有道理的，因为resource在初始页面加载时没有设置，但是最好的处理方法是什么?

必须有一种比不断检查是否model为空更清洁的方法来处理它。

标签： vue.jsapollovue-apollo