다른 데이터 개체 vueJ에 데이터 개체 값을 넣는 방법s

다른 데이터 개체 vueJ에 데이터 개체 값을 넣는 방법s

코드는 다음과 같습니다.

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 직후에 내 DB를 누르는 것을 볼 수 있습니다.문제가 여기에 있습니다.그는 오브젝트를 올바르게 눌렀지만 컬러의 값을 갱신하지 않습니다.

다음과 같은 데이터 속성에 액세스할 수 없습니다.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 }
  }
}

상수를 최상위 수준으로 설정하고 성분 데이터를 초기화하는 데 사용하는 것이 좋습니다.

동일한 구성요소에서 상수 참조:

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

하위 구성 요소에서 상수 참조:

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

언급URL : https://stackoverflow.com/questions/46491468/how-to-put-a-value-of-data-object-in-another-data-object-vuejs