Javascript Vue JS单击函数的行为异常

我有一个vue.js组件，它的设计就像一个向导，有5个步骤。 向导的每个步骤上都有大约4个按钮，每个按钮调用一个名为

addPoint（）

的函数，每个调用将一个数字传递给

addPoint

和

addPoint

求和，依此类推。。。点击按钮，我调用这个函数，然后进入下一步

但奇怪的是，有些按钮在点击时起作用，而有些按钮则不起作用。 请参见vue模板a函数

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

---

我注意到这个错误发生得最为频繁，尤其是当我将0传递给

addPoint

函数时。注意：控制台中没有显示错误。

不要将0解析为整数

parseInt（0）

将导致

NaN

。 检查addPoint方法中的O，并将其直接传递为：

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

---

不要解析int 0。检查并在不使用parseInt的情况下传递它。parseInt（0）将返回NaN。我这样做了，即删除了parseInt（0）…仍然没有触发addPoint（0）。好的。将0作为“零”传递，然后查看它是否工作。

parseInt（）

用于

字符串

输入

addPoint（）

仅使用

Number

s调用（

point

始终是一个

Number

），因此无需在

point

上调用

parseInt（）

。addPoint（0）的按钮，即@单击.stop.capture。once=“addPoint（0）”即使在将我的代码更改为该值后仍然没有触发。totalPoints+=parseInt（this.totalPoints）+（point！=0）？parseInt（point）：0；

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