如何从另一个数据属性引用 Vue 数据属性答案

【问题标题】：How to reference a Vue data property from another data property如何从另一个数据属性引用 Vue 数据属性
【发布时间】：2018-07-02 18:42:39
【问题描述】：

我正在学习 Vue.JS，我所有从 currentDashboard 数据表达式中引用 dashboards 属性的尝试都导致“仪表板未定义”。 Vue 是否以某种方式在 dashboards 之前评估 currentDashboard 表达式，还是我需要一些限定符来引用它，这没有帮助？

vue = new Vue({
el: '#dashboard',
data: {
    dashboards: store.getDashboards(),
    currentDashboard: dashboards[0],
}

})

【问题讨论】：

嗨 Mikee，你的问题解决了吗？如果是，请尝试更新您的问题以帮助他人，或者如果答案有助于将其标记为已解决以保留 S.O.干净的。谢谢！

标签： vue.js

【解决方案1】：

我认为一种解决方案是您可以使用computed 方法，因为dashboards[0] 没有在同一个created 循环中定义。尝试类似：

data: {
    dashboards: store.getDashboards(),
},
computed: {
  currentDashboard: function () { return this.dashboards[0] }
}

通过这种方式，当您调用 currentDashboard 时定义了变量，您不必为此 var 重构 Vue.js 调用。

编辑： 是的，如果您想知道原因，正如 Joel 所说，您可以在官方文档中阅读：

如果您知道以后需要某个属性，但它一开始是空的，或者不存在，你需要设置一些初始值。

在这种情况下，data() 方法从队列中的所有值开始，没有分配它，为此，起始值是undefined。这里：https://vuejs.org/v2/guide/instance.html

希望对你有帮助！

【讨论】：

谢谢，这实际上是我最终在学习时所做的工作。然而，这真的不是一个计算值，它只是一个参考，我想知道为什么我似乎不能这样做？
这是因为当创建数据对象时，它需要预先知道所有的值，你不能基于另一个属性来构造一个属性，因为基础对象还没有创建。如果你在新的 Vue 实例之前计算了 store.getDashboards()，那么你可以引用它。

【解决方案2】：

您可以在返回data 属性之前创建dashboard 变量，以便您可以在data 属性中多次使用它。

vue = new Vue({
el: '#dashboard',
data() {
    let dashboard = store.getDashboards()
    dashboards: dashboard,
    currentDashboard: dashboard[0],
}

希望对你有帮助

【讨论】：