方法的返回值没有出现答案

【问题标题】：The method's returned value is not appearing方法的返回值没有出现
【发布时间】：2021-04-02 14:22:10
【问题描述】：

我有一个返回一个数组值的方法。我希望在 HTML 文件中，此标签 p 具有方法的值并更新您的值。问题是：HTML 不更新，为什么？如果使用console.log，值正常出现...

HTML

<div id="app">
  <button @click="test($event, 5, 10)">Generic Button</button>

  <!--here, the value doesn't appear-->
  <p style="background-color: blue">Test value: {{returnValueVector()}}</p>
</div>

var app = new Vue({
    el: '#app',
    data: {
        actions: [],
        counter: 0,
    },
    methods: {
        returnValueVector() {
            return this.actions[this.counter]
        },
        test(event, max, min) {
            this.counter++
            this.actions.push(Math.floor(Math.random() * max) + min)
        }
    }
});

【问题讨论】：

标签： javascript html arrays function vue.js

【解决方案1】：

您需要将counter 默认设置为-1，而不是0，因为在您执行this.counter++ 之后数组从0 开始

【讨论】：

如果计数器为 1，而数组的长度为 0，则总是未定义。