How does Vue.js add two values and sum them (without computed)

wants to show the result of the addition of the two variables on the screen, but the current way of writing only shows the value of the initial variable

.

related codes

                    <div class="grid margin-top-20">
                        <section id="section-course" class="col-12 panel not-ready">
                            <h3></h3>
                            <div class="status-list">
                                <div class="status">
                                    <dl class="completed">
                                        <dt></dt>
                                        <dd>{{parseInt(info.completed + info.passed)}}</dd>
                                    </dl>
                                </div>
                                <div class="status">
                                    <dl class="incomplete">
                                        <dt></dt>
                                        <dd>{{parseInt(info.failed + info.incomplete)}}</dd>
                                    </dl>
                                </div>
                                <div class="status">
                                    <dl class="not-attempted">
                                        <dt></dt>
                                        <dd>{{parseInt(info.notAttempted)}}</dd>
                                    </dl>
                                </div>
                            </div>
                    </div>

how to solve it? What are the knowledge points about Vue in this place?

Apr.26,2021

Dear friends, thank you for answering the question has been solved. The code I wrote looks fine, but it's possible that in Vue this + is added only when it's a number. So the variable is converted to OK with the Number () method. Modified code

< hr >
                <div class="status-list" id="section-course" v-cloak >
                  <div class="status">
                    <dl class="completed">
                      <dt></dt>
                      <dd>{{parseInt(Number(info.completed) + Number(info.passed))}}</dd>
                    </dl>
                  </div>
                  <div class="status">
                    <dl class="incomplete">
                      <dt></dt>
                      <dd>{{parseInt(Number(info.incomplete) + Number(info.failed))}}</dd>
                    </dl>
                  </div>
                  <div class="status">
                    <dl class="not-attempted">
                      <dt></dt>
                      <dd>{{parseInt(info.notAttempted)}}</dd>
                    </dl>
                  </div>
                </div>

there should be no problem with writing. First make sure that the info variable is declared correctly and that the value has changed.


if it is not complicated, you can output info in mounted:function () {} to see the status of each attribute without computed,.
if you are worried about mounted, you can change it according to the official website ( https://cn.vuejs.org/v2/api/-sharp.)
for example:

mounted: function () {
  this.$nextTick(function () {
    console.log('info', info)
  })
}
Menu