Custom Action Example

Code

// Check if a value is provided
if (!value) {
  console.warn("No value provided for search.");
  return;
}

// Define the API endpoint (JSONPlaceholder)
// We'll filter todos by userId based on the input value
var apiUrl = "https://jsonplaceholder.typicode.com/todos?userId=" + value;

console.log("Fetching data from: " + apiUrl);

try {
  // Perform the request using the platform's http utility (encapsulation of Nuxt 4 useFetch)
  // useFetch typically parses JSON automatically.
  // We await the result. 
  // Note: useFetch in Nuxt returns { data, error, ... }
  const { data, error } = await http(apiUrl);

  if (error && error.value) {
    throw new Error("Generic Error: " + error.value);
  }

  // Access the data (Ref value if it's a ref, or direct if the utility un-refs it)
  // Assuming standard Nuxt composition API behavior where top level properties are Refs
  const results = data.value || data;

  console.log("--- Search Results (User ID: " + value + ") ---");
  // Check if we got any results
  if (results && results.length > 0) {
    console.table(results); // Display as a table for better readability
    console.log("Total records found: " + results.length);
  } else {
    console.log("No records found for User ID: " + value);
  }

} catch (err) {
  console.error("Fetch error:", err);
}