如何在Vue.js中取得數組的總長度

Question

我正在嘗試獲取總結果長度，但在我的模板中沒有得到任何內容。這是我的腳本：

data() {
    return {
      searchResults: [],
      totalResults: [],
}}
       const response = await axios.post(
          "http://localhost:5000/api/search",
          searchData
        );
        this.searchResults = response.data.Response.Results; // Set the search results in the component's data // Retrieve the traceId from the response
        const nestedResults = response.data.Response.Results;
        const totalResults = nestedResults[0].length;
        console.log("Total Results:", totalResults);

這是我的控制台，我得到了totalResults。

Total Results: 12

這是我的模板。

<p>Total Results: {{ totalResults }}</p>

模板回傳了這個。

Total Results: []

我在我的模板中什麼都得不到，請問我該怎麼辦？

Answer 1

首先，你正在用空數組來初始化一個應該是數字的變數。你應該這樣寫：

data() {
    return {
      searchResults: [],
      totalResults: 0,
}}

其次，你沒有將值賦給正確的totalResults變量，你只是聲明了一個新變數。要將數值賦給totalResults，你應該使用this.totalResults。因此，正確的寫法是：

this.totalResults = nestedResults[0].length;