对象属性在 Vue 脚本中不起作用但在模板中起作用答案

【问题标题】：Object property not working in Vue script but working in template对象属性在 Vue 脚本中不起作用但在模板中起作用
【发布时间】：2019-08-03 11:19:17
【问题描述】：

我正在享受一个有趣的 vue 项目。我在“impostazioni”集合中有一个名为“default”的firestore文档：

impostazioni/default = { 
  iniziata: false,
  finita: false,
  password: "abcd"
}

我想检索单个属性并将它们存储在组件中。我做这样的事情

<template>
{{impostazioni}}
</template>

<script>

export default {
    name: "login",
    data(){
            impostazioni: null
        }
    },
    firestore: {
        impostazioni: db.collection('impostazioni').doc('default')
    }
 }
    </script>

如果我这样做，它会在模板中打印预期打印的内容：

{ "finita": false, "iniziata": false, "password": "abcd" }

但如果在数据中我有：

data(){
  return {
    iniziata: null,
    finita: null,
    password: null,
  }
},
firestore : {
  iniziata: db.collection('impostazioni').doc('default')['iniziata'],
  finita: db.collection('impostazioni').doc('default')['finita'],
  password: db.collection('impostazioni').doc('default')['password']
}
}

然后在模板中：

{{finita}} - {{iniziata}} - {{password}}

它不起作用。它会引发错误，例如 db.collection('impostazioni').doc('default') 未定义。

如果我将所有文档存储到“impostazioni”中，然后在模板中引用{{impostazioni.password}}，我得到了正确的元素。

如何在单独的变量中获取文档的不同元素？

【问题讨论】：

标签： javascript firebase vue.js vuejs2 google-cloud-firestore

【解决方案1】：

Firestore 正在返回一个在您尝试访问字段时无法解析的承诺。

因此，要么明确地等待 promise 解决，要么使用更 Vue 风格的 computed 属性来反映不同的属性，如果你真的需要它们在单独的变量中：

computed: {
  iniziata() {
    if(this.impostazioni)
      return this.impostazioni
    else
      return '' // default value here
  }
  ...
}

【讨论】：