Vue.js获取数组总长度后模板无法正常显示该值如何解决？

问题原因 #

• 请求后你声明了局部变量const totalResults，但没有把计算结果赋值给组件实例的this.totalResults，模板绑定的是data中定义的组件实例变量，因此无法获取到正确数值。
• data里totalResults初始值设为数组[]，不符合结果长度的数字类型，容易引发显示异常。

解决方案 #

1. 修正data初始值 #

把totalResults的初始值改为数字类型的0：

data() {
    return {
      searchResults: [],
      totalResults: 0, // 改为数字初始值
    }
}

2. 正确赋值给组件实例变量 #

删除局部变量声明，直接将计算结果赋值给this.totalResults：

const response = await axios.post(
    "http://localhost:5000/api/search",
    searchData
);
this.searchResults = response.data.Response.Results;
// 直接赋值给组件实例的totalResults
this.totalResults = response.data.Response.Results[0].length;
console.log("Total Results:", this.totalResults);

3. 可选：添加空值保护（避免报错） #

如果response.data.Response.Results可能为空数组，用可选链操作符防止报错：

this.totalResults = response.data.Response.Results?.[0]?.length || 0;

模板无需修改 #

模板中的<p>Total Results: {{ totalResults }}</p>保持原样即可，现在会正确显示计算出的结果长度。

内容的提问来源于stack exchange，提问作者Daniel