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

user_6275251 0
Viewed 11928

Here is my code: 

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

This code doesn't work. I would like to put the value of msg in my object newColor. Does anyone have a solution?

Here is a complement of code :

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>

You can see just after msgFunc, the push on my DB, and the problem is here, he push correctly object, but he don't update the value of color

vuejs2 vue.js
2 Answers

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 }
  }
}
user_26784540

I prefer to set the constant at a top level, and use it to initialize the component data.

Referencing a constant in the same component:

let myConstant = false;
let app = new Vue({
    data: {
        myDataVariable: myConstant ? "true" : "false";
});

Referencing a constant in a child component:

let myConstant = false;
let app = new Vue({
    data: {
        // Set a data property and user it from your child component as this.$parent.myConstant
        myConstant: myConstant; 
});
let child = new Vue({
    data: {
        myDataVariable: this.$parent.myConstant ? "true" : "false";
});
user_10011990
Related