Vue开发中如何在data内部引用另一个同层级的data属性的值

你当前的写法无法生效，是因为data函数执行构建返回对象时，整个返回的data实例还没有挂载到this上，此时this.somerandom还未定义，拿到的值会是undefined。

解决方法 #

方法1：提取公共初始值（仅需初始值同步时使用） #

如果只需要两个属性的初始值保持一致，后续不需要联动更新，直接在data函数内部先定义公共变量再复用即可：

export default {
  data () {
    // 先定义公共初始值
    const initRandom = "foo"
    return {
        somerandom: initRandom,
        mylist: {
            random: initRandom
        }
    }
  }
}

方法2：将mylist定义为计算属性（需要双向联动时使用） #

如果要求后续somerandom修改时，mylist.random自动同步更新，直接把mylist定义为计算属性是最简洁的方案：

export default {
  data () {
    return {
        somerandom: "foo"
    }
  },
  computed: {
    mylist() {
      return {
        random: this.somerandom
      }
    }
  }
}

方法3：使用watch监听（mylist存在大量其他固定属性时使用） #

如果mylist还有很多不需要联动的固定属性，不想把整个mylist做成计算属性，可以用watch监听somerandom的变化，单独更新random字段：

export default {
  data () {
    return {
        somerandom:"foo",
        mylist:{
            other: 'bar', // 其他固定属性
            random: ''
        }
    }
  },
  watch: {
    somerandom: {
      immediate: true, // 初始化阶段就执行一次赋值
      handler(newVal) {
        this.mylist.random = newVal
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者FeelRightz