Vue JS 点击函数行为异常

Question

我有一个 vue.js 组件，设计得像一个有 5 个步骤的向导。 向导的每个步骤都有大约 4 个按钮，每个按钮调用一个名为 addPoint() 的函数，每个调用将一个数字传递给 addPoint 和 addPoint 将其相加，依此类推......点击按钮后，我调用此函数，然后进行下一步。

但奇怪的是，有些按钮在点击时会起作用，而另一些则不起作用。 见vue模板一个函数。

<div class="row" v-if="step === 2">
                <div class="col-md-6">

                    <div class="row">
                        <h4>Risk Assessment</h4>
                            <div class="alert alert-warning" role="alert">
                          This is <strong>{{step-1}}</strong> of 5 questions on this assesment
                        </div>
                        <p>How would you describe your knowledge of investment?</p>
                        <div class="form-row col-md-12">
                            <button @@click.stop.capture.once="addPoint(1)"  type="button" class="btn btn-sm btn-light col-md-12">
                                None (1)
                            </button>
                        </div>
                        <div class="form-row col-md-12 pt-3">
                            <button @@click.stop.capture.once="addPoint(3)" type="button" class="btn btn-sm btn-light col-md-12">
                                Limited (3)
                            </button>
                        </div>
                        <div class="form-row col-md-12 pt-3">
                            <button @@click.stop.capture.once="addPoint(7)" type="button" class="btn btn-sm btn-light col-md-12">
                                Good (7)
                            </button>
                        </div>
                        <div class="form-row col-md-12 pt-3">
                            <button @@click.stop.capture.once="addPoint(10)" type="button" class="btn btn-sm btn-light col-md-12">
                                Extensive(10)
                            </button>
                        </div>


                    </div>
                </div>
                  <div style="padding-top:0rem;padding-bottom:0rem;width:450px;height:750px" class="col-md-6 centerimagetext" :style="{ backgroundImage: 'url(' + halfPageStartImage + ')' }">
                        <!--Image Goes Here-->

                    </div>
            </div>
            <!--End of Question 1 -->


            <!--Start of Question 2-->
            <div class="row" v-if="step === 3">
                <div class="col-md-6">
                    <div class="row">
                        <h4>Risk Assessment</h4>
                  <div class="alert alert-warning" role="alert">
                          This is <strong>{{step-1}}</strong> of 5 questions on this assesment
                        </div>
                        <p>How long do you think you can invest without withdrawing your fund?</p>
                        <div class="form-row col-md-12">
                            <button @@click.stop.capture.once="addPoint(0)" type="button" class="btn btn-sm btn-light col-md-12">
                                Less than 3 months (0)
                            </button>
                        </div>
                        <div class="form-row col-md-12 pt-3">
                            <button @@click.stop.capture.once="addPoint(0)" type="button" class="btn btn-sm btn-light col-md-12">
                                3-12 months (0)
                            </button>
                        </div>
                        <div class="form-row col-md-12 pt-3">
                            <button @@click.stop.capture.once="addPoint(4)" type="button" class="btn btn-sm btn-light col-md-12">
                                2-3 years (4)
                            </button>
                        </div>
                        <div class="form-row col-md-12 pt-3">
                            <button @@click.stop.capture.once="addPoint(8)" type="button" class="btn btn-sm btn-light col-md-12">
                                Over 5 years (8)
                            </button>
                        </div>


                    </div>
                </div>
                <div style="padding-top:0rem;padding-bottom:0rem;width:450px;height:750px" class="col-md-6 centerimagetext" :style="{ backgroundImage: 'url(' + halfPageStartImage + ')' }">
                        <!--Image Goes Here-->

                    </div>
            </div>
            <!--End of Question 2-->

Vue JS 方法

addPoint: function(point) {
                if (this.step === 6) {
                    this.totalPoints += parseInt(this.totalPoints) + parseInt(point);
                    console.log("Total Point at the end " + this.totalPoints);
                    this.next();
                }
                else {
                    console.log("We passed " + point);
                    
                    this.totalPoints += parseInt(this.totalPoints) + parseInt(point);
                    console.log("We summed " + this.totalPoints);
                    this.next();  
                    return this.totalPoints; 
                }
               
            },

我注意到这个错误发生得最多，尤其是当我将 0 传递给 addPoint 函数时。注意：控制台中没有显示错误。

Answer 1

不要将 0 解析为整数。 parseInt(0) 将导致 NaN。 在 addPoint 方法中检查 O 并直接传递为：

this.totalPoints += parseInt(this.totalPoints) + (point != O)?parseInt(point):0;