How to put a value of data object in another data object vueJS

Question

Here is my code:

data () {
  return {
    msg: \'\',
    rgbValue: \'\',
    newColor: {
      color: this.msg
    }
         


        

Answer 1

You won't be able to access data properties like this.msg until the data method has returned.

Just set that value outside of the return statement:

data () {
  let msg = '';

  return {
    msg: msg,
    rgbValue: '',
    newColor: {
      color: msg
    }
  }
}

---

If you need the newColor property to always reflect the value of this.msg, you could make it a computed property instead:

data () {
  return {
    msg: '',
    rgbValue: '',
  }
},
computed: {
  newColor() {
    return { color: this.msg }
  }
}