Question

这些是我的代码

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

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

任何人都可以给我任何解决方案的建议吗？

Answer 1

一种选择是使用一些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/

Answer 2

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

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

现在您可以调用this.cat1和this.cat2，但是cat2每次更改都会更新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（）无效

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

3 个答案: