如何将数据对象的值放在另一个数据对象vueJS中

Question

这是我的代码:

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

此代码不起作用.我想把价值msg放在我的对象中newColor.有没有人有办法解决吗？

以下是代码的补充:

data () {
            let msg =  '';
            return {
                msg: msg,
                rgbValue: '',
                newColor: {
                    color: msg
                }
            }
        },
        components: {
            HeaderComponent: require('./HeaderComponent.vue')
        },
        methods: {
            msgFunc: function () {

                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


                function convert(hex) {
                    hex = hex.replace('#', '');

                    const r = parseInt(hex.length == 3 ? hex.slice(0, 1).repeat(2) : hex.slice(0, 2), 16);
                    const g = parseInt(hex.length == 3 ? hex.slice(1, 2).repeat(2) : hex.slice(2, 4), 16);
                    const b = parseInt(hex.length == 3 ? hex.slice(2, 3).repeat(2) : hex.slice(4, 6), 16);

                    return 'rgb(' + r + ', ' + g + ', ' + b + ')';

                }

                this.rgbValue = convert(this.msg)
                rgbValueContainer.style.opacity = '1'

                this.msg = '#'
            }

<section class="input-container">
            <label for="inputLabel">Type your HEX color | Click & Press enter</label>
            <input type="text" id="inputLabel" v-model="msg" @change="msgFunc" @click="sharpStr">
        </section>

你可以在msgFunc之后看到,推送我的数据库,问题出在这里,他正确推送对象,但他没有更新颜色的值

Answer 1

this.msg在data方法返回之前,您将无法访问数据属性.

只需在return声明之外设置该值:

data () {
  let msg = '';

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

如果您需要该newColor属性始终反映其值this.msg,则可以将其设为计算属性:

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