Vue Js paragraph display -> ok but checkbox doesn't works

Question

I need call 3 times the same POST API call on mounted and get the response.
The response of api is stored on vuex.

If i do paragraph that works:
{{answer1}} // displayed 2
{{answer2}} // displayed 1
{{answer3}} // displayed 0

but my checkbox doesn't works on first launch but if i save my document and it re-render thats's works....:

<el-checkbox v-model="...." :disabled="answer1 > 0 ?'false':'true'" ></el-checkbox>

my mounted call api :

async mounted(){

 await this.actionSetanswer1({
            props1: '..',
            props2: '..',
        }).then(() => {
            this.actionSetanswer2({
                props1: '...',
                props2: '...',
            }).then(() => {
                this.actionSetanswer3({
                    props1: '...',
                    props2: '...',
                })
            })
        })
}

Thanks you very much in advance NB : this.$forceUpdate() doesn't work too...

score 1 · Answer 1 · answered Aug 27 '21 at 10:11

you can add a loading state:

// script
data() {
  return {
    isLoading: true
  }
},
mounted() {
  // ...
  .then(() => {
    this.actionSetanswer3({
       props1: '...',
       props2: '...',
    }).then(() => {
       this.isLoading = false
    })
}

// template
<el-checkbox v-if="!isLoading" v-model="...." :disabled="answer1 > 0 ?'false':'true'" />

Vue Js paragraph display -> ok but checkbox doesn't works

1 Answers1