如何从另一个数据属性访问 Vuejs 数据属性？答案

【问题标题】：How to access a Vuejs data property from another data property?如何从另一个数据属性访问 Vuejs 数据属性？
【发布时间】：2020-10-20 04:30:39
【问题描述】：

这些是我的代码

data: {
     cat1 : {name: "Category 1", reference : false},
     cat2 : {name: "Subcategory 2", reference: this.cat1}
}

当我要从任何函数调用 this.cat2.reference 时，它给我的值是 false。我不想在某处声明 cat1 并在此处引用。我想要与上面完全相同的结构，这样我就可以完美地获得 cat2 引用。

谁能告诉我任何解决方案？

【问题讨论】：

标签： vue.js vuejs2 vuejs3

【解决方案1】：

您可以将引用设置为将返回 this.data.cat1 的函数：

data: {
     cat1 : {name: "Category 1", reference : ()=> {return null;}},
     cat2 : {name: "Subcategory 2", reference: ()=> {return this.data.cat1;}}
}

为了获得 cat2 的引用，您需要将其作为函数调用：

var referenceOfCat2 = this.data.cat2.reference();
//referenceOfCat2 = {name: "Category 1", reference : ()=> {return null}}

虽然如果你尝试在组件本身之外调用这个函数，它是行不通的。如果要将 cat2 传递给另一个组件，则需要在传递之前设置他的引用（调用 ref 函数），否则一旦到达另一个组件，数据目标将不一样（除非进行一些调整）并且reference() 不起作用

【讨论】：

无法将 cat1 引用调用为函数。获取 this.cat2.reference 值的输出“reference:ƒ reference()”
不要忘记引用后的 ()，因为它是一个函数——它对我来说很好，我得到 {name: "Category 1", reference : ()=> {return null; }} 调用 this.data.cat2.reference() 时

【解决方案2】：

一种选择是使用一些getter methods 创建您的data 对象

例如

new Vue({
  el: '#newUser',
  data: () => { // make sure to use a "data" function
    // initialise with a declared variable
    const formData = {
      cat1, // not sure where these come from
      cat2,
      cat3,
      cat5: { name: 'Subcategory 5', get reference() { return formData.cat1 }}
    }
    return { formData }
  }
}

演示~https://jsfiddle.net/ztfgapxh/

【讨论】：

不适合我。请观看此视频streamable.com/kw9wa9 并给我一个可能的解决方案。这是我的全部代码并申请了cat5。 new Vue({ el: "#newUser", data: { formData: { cat1, cat2, cat3, cat5: { get reference() { return formData.cat1 } }, }, }, });
@ShamimSdr 我认为您需要仔细看看我的答案，尤其是说“确保使用数据函数”

【解决方案3】：

我认为使用计算属性会更好：

data: {
  cat1 : {name: "Category 1", reference : false}
}
computed: {
  cat2() {
    return {name: "Subcategory 2", reference: this.cat1}
  }
}

现在您可以致电this.cat1 和this.cat2，但每次cat1 更改时都会更新cat2。

https://vuejs.org/v2/guide/computed.html

编辑：如果您想以一致的方式处理所有catX，您可以将它们全部作为计算属性

【讨论】：

它有效，但我想从数据属性而不是从外部某处进行引用。有可能吗？
为什么要在数据声明中使用它而不是作为计算属性？我不知道怎么做你问的，但我不明白你为什么特别想要那个