vue.js - 如何从另一个数据属性访问 Vuejs 数据属性？

Question

这些是我的代码

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

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

任何人都可以请告诉我任何解决方案吗？

Answer 1

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

例如

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/

Answer 2

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

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一致的方式处理所有内容，则可以将它们全部作为计算属性

Answer 3

您可以将引用设置为将返回 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() 将不起作用