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>

在页面加载时，我遇到一堆关于无法读取未定义属性'name'和'description'的错误，这是因为在初始页面加载时未设置resource，但是最好的处理方法是什么？

与不断检查model是否为空相比，必须有一种更清洁的处理方式。

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

0 个答案: