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

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

Does this answer your question? Self-references in object literals / initializers — T.J. Crowder
– T.J. Crowder, Commented Aug 31, 2022 at 12:05

thanksd · Accepted Answer · 2017-09-29 15:13:49Z

26

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

edited Sep 29, 2017 at 15:13

answered Sep 29, 2017 at 14:53

thanksd

55.9k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

KolaCaine Over a year ago

Ok I understand, but my problem not really solved. I use the newColor object for push in my DB run with firebase, he push that object but the color key is empty.

thanksd Over a year ago

Why not just push { color: this.msg } when you need to call the database instead of storing newColor on your instance?

KolaCaine Over a year ago

Because in the near futur, I add a new key on this object he take a number. Else, I'm right with you, with one value it's no use doing an object

thanksd Over a year ago

I'm still not seeing the issue. Seems like you could still build that object whenever you are calling the database. You could also use a computed property, but that seems redundant in this case.

KolaCaine Over a year ago

Object is construct, but the value of color is empty, and for example if I write in my input #000, in firebase DB I would like to save it.

|

profimedica · Accepted Answer · 2022-03-26 02:01:50Z

0

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";
});

answered Mar 26, 2022 at 2:01

profimedica

2,85835 silver badges47 bronze badges

Comments

Avraham · Accepted Answer · 2023-07-14 14:50:17Z

0

Though I agree with @thanksd's answer that newColor should be a computed property, it is still possible to refer to a data variable within the data function if you use a getter.

data () {
  const vm = this;
  return {
    msg: '',
    get newColor () {
      return {
        color: vm.msg
      };
    }
  };
}

answered Jul 14, 2023 at 14:50

Avraham

9781 gold badge14 silver badges28 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related