How to get the total length of an array in Vue.js

Question

I'm trying to get the total result length but I'm not getting anything in my template . This is my script:

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

This is my console and I get the totalResults.

Total Results: 12

This is my template.

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

The template returned this.

Total Results: []

I get nothing in my template, what should I do?

Answer 1

First, you are initializing a variable that is supposed to be a number with an empty array. You should write like this:

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

Secondly, you are not assigning the value to the correct totalResults variable, you are just declaring a new variable. To assign values ​​to totalResults, you should use this.totalResults. Therefore, the correct way to write it is:

this.totalResults = nestedResults[0].length;