약속이 해결되면 데이터 속성 값 설정

약속이 해결되면 데이터 속성 값 설정

내 앱에서는 Sequelize를 사용하여 mysql 백엔드에 연결해야 합니다.다음은 코드입니다.

export default {
        data () {
            return {
                username:''
            }
        },
        mounted () {
            this.dbConnect()
        },
        methods: {
            dbConnect : function () {
                console.log("Test connecting to the database");
                let connection = new Sequelize('mydatabase','root','12345' , {
                  host: '127.0.0.1',
                  dialect: 'mysql',
                  logging: console.log.bind(console)
                });

                var userGroup = connection.define('roles',{
                    name:Sequelize.STRING
                },{ freezeTableName: true, timestamps : false})

                userGroup.findById(1).then(function(group) {
                    this.username =  group.get('name');
                    console.info('current username is :' + this.username);
                })

            }
        }
    }

모든 게 잘 되고 있어 그때가 되면만 빼고
this.username = group.get('name)이미 렌더링된 UI가 해결됩니다.뷰에서 올바르게 업데이트되도록 데이터 속성을 업데이트할 수 있는 방법이 있습니까?

몇 가지 포인트

dbConnect : function () {
                console.log("Test connecting to the database");
                let connection = new Sequelize('mydatabase','root','12345' , {
                  host: '127.0.0.1',
                  dialect: 'mysql',
                  logging: console.log.bind(console)
                });

                var userGroup = connection.define('roles',{
                    name:Sequelize.STRING
                },{ freezeTableName: true, timestamps : false})

                userGroup.findById(1).then(function(group) {
                    this.username =  group.get('name'); // [1]
                    console.info('current username is :' + this.username);
                })

            }

[1]에서 창 객체에 대한 속성 설정username.

다음과 같은 방법으로 기능을 변경해야 합니다.

userGroup.findById(1).then((group) => {
    this.username =  group.get('name');
    console.info('current username is :' + this.username);
})

또는 다음과 같은 변수를 설정할 수 있습니다.

let self = this
userGroup.findById(1).then(function(group) {
    self.username =  group.get('name');
    console.info('current username is :' + self.username);
})

다른 요점은 비동기 호출에 vuex 액션을 사용하세요.

Vue 라이프 사이클 훅 다이어그램

그mounted라이프 사이클 훅은, 다음의 경우에 사용됩니다.Vue인스턴스가 생성되어 각 인스턴스가el컴포넌트는 교환 완료vm.$el.

약속의 해결이 인스턴스의 시각적 렌더링 전에 완료되기까지 너무 오래 걸리는 경우, 약속의 해결을 의 이벤트로 다시 설정해 보십시오.created후크. 외부 서비스를 사용하여 Vue 인스턴스를 위한 많은 사전 처리 및 데이터 수집을 수행하며 항상 잘 작동합니다.

그래서 대신...

mounted() {
    this.dbConnect()
}

...그것을...에 넣어...

created() {
    this.dbConnect()
}

---

갱신하다

연결이 확립되고 확약이 완료되면 Vue 인스턴스의 조건부 렌더링을 사용하여 전체 렌더링을 트리거할 수 있습니다.

HTML의 외부 요소에 대해서만 추가합니다.

<div v-if="!isProcessing">
    <!-- contents -->
</div>

JS에 약간 추가:

export default {
        data () {
            return {
                username:'',
                isProcessing: true
            }
        },
        mounted () {
            this.dbConnect()
        },
        methods: {
            dbConnect : function () {
                console.log("Test connecting to the database");
                let connection = new Sequelize('mydatabase','root','12345' , {
                  host: '127.0.0.1',
                  dialect: 'mysql',
                  logging: console.log.bind(console)
                });

                var userGroup = connection.define('roles',{
                    name:Sequelize.STRING
                },{ freezeTableName: true, timestamps : false})

                userGroup.findById(1).then((group) => {
                    this.username =  group.get('name');
                    this.isProcessing = false;
                    console.info('current username is :' + this.username);
                })

            }
        }
    }

언급URL : https://stackoverflow.com/questions/42265673/set-the-data-property-value-when-the-promise-has-resolved