我试图了解在 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
为空更清洁的方法来处理它。