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](https://stackoverflow.com/questions/4616202/self-references-in-object-literals-initializers) — T.J. Crowder, Aug 31 '22 at 12:05

thanksd · Accepted Answer · 2017-09-29T15:13:49.603

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 '17 at 15:13

answered Sep 29 '17 at 14:53

thanksd

54,176
22
157
150

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. – KolaCaine Sep 29 '17 at 15:02
Why not just push `{ color: this.msg }` when you need to call the database instead of storing `newColor` on your instance? – thanksd Sep 29 '17 at 15:05
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 – KolaCaine Sep 29 '17 at 15:08
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. – thanksd Sep 29 '17 at 15:12
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. – KolaCaine Sep 29 '17 at 15:15
Are you binding `msg` to your input? You haven't shared enough code to help you. – thanksd Sep 29 '17 at 15:19
You're not using a computed in your example. – thanksd Sep 29 '17 at 15:24
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/155611/discussion-between-jonathan-and-thanksd). – KolaCaine Sep 29 '17 at 15:30

score 0 · Answer 2 · answered Mar 26 '22 at 02:01

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

score 0 · Answer 3 · answered Jul 14 '23 at 14:50

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

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

3 Answers3

Linked

Related