Vue.js 如何让俩个值相加,求和(不用computed)

Question

想在画面上表示出俩个变量相加后的结果,但是现在的写法只显示最开始的变量值

相关代码

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

如何解决?这个地方Vue有关的知识点?

Answer 1

各位朋友谢谢回答 问题已经解决 .我写的代码看上去没有问题,但是可能在Vue里面 这个 + 只有在数字的时候才会加法计算.于是把变量用Number()方法转换下就OK了.修改后的代码

---

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

Answer 2

写法应该没问题,先确定下info变量是不是声明正确了,并且值有变化.

Answer 3

非复杂可以不用computed，可以在mounted:function(){ }里输出一下info看一下里面各个属性的情。
如果担心mounted时没有完全渲染，可以照着官网改一下（https://cn.vuejs.org/v2/api/#...）
比如：

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