Vue.js 如何将数据对象的值放入另一个数据对象vueJS中

这是我的密码：

数据（）{
返回{
消息：“”，
RGB值：“”，
新颜色：{
颜色：this.msg
}
}
}

这个代码不起作用。我想把

msg

的值放在我的对象

newColor

中。有人有解决办法吗

以下是代码的补充：

数据（）{
让msg=''；
返回{
味精:味精,，
RGB值：“”，
新颜色：{
颜色：味精
}
}
},
组成部分：{
HeaderComponent:require（“./HeaderComponent.vue”）
},
方法：{
msgFunc:函数（）{
colorsRef.push（this.newColor）；
const app=document.querySelector（“#app”）；
const rgbValueContainer=document.querySelector（'.rgb value'）；
if（this.msg[0]！='#'）{
this.msg='#'
}
app.style.backgroundColor=this.msg
函数转换（十六进制）{
十六进制=十六进制。替换（'#'，''）；
常量r=parseInt（hex.length==3？hex.slice（0,1）。重复（2）：hex.slice（0,2,16）；
常量g=parseInt（hex.length==3？hex.slice（1,2）。重复（2）：hex.slice（2,4,16）；
常量b=parseInt（hex.length==3？hex.slice（2,3）。重复（2）：hex.slice（4,6,16）；
返回'rgb（'+r+'、'+g+'、'+b+'）；
}
this.rgbValue=convert（this.msg）
rgbValueContainer.style.opacity='1'
this.msg='#'
}

键入十六进制颜色|单击并按enter键

在返回

data

方法之前，您将无法访问类似

this.msg

的数据属性

只需在

return

语句之外设置该值：

data () {
  let msg = '';

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

---

如果需要

newColor

属性始终反映

this.msg

的值，可以将其改为计算属性：

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

---

好的，我理解，但我的问题没有真正解决。我在firebase的DB运行中使用newColor对象来推送，他推送该对象，但颜色键为空。为什么不直接推送

{color:this.msg}

当你需要调用数据库而不是在你的实例上存储

newColor

时？因为在不久的将来，我在这个对象上添加了一个新的键，他接受一个数字。否则，我同意你的观点，使用一个值做一个对象是没有用的，我仍然看不到问题。似乎你仍然可以在每次调用时构建这个对象数据库。您也可以使用计算属性，但在本例中这似乎是多余的。对象是construct，但color的值为空，例如，如果我在firebase DB中写入输入#000，我希望保存它。