Creating an empty array of objects in Vue 3 requires using the Vue 3 syntax

In my project using Vue3 with Nuxt, I encountered an issue. My goal is to initialize an empty array of objects and then populate it.

let results = ref([]);
        results.value = [
            {
                "name": input.value,
            }
        ]

However, I am receiving the following error message:

Type '{ name: string; }' is not assignable to type 'never'.

I attempted the following solution:

let results: any[] = ref([]);

I also referred to the v-for documentation in Vue, but the example mentioned initializes a non-empty array of objects:

const items = ref([
                 { 
                   message: 'Foo' 
                 }, 
                 { 
                    message: 'Bar' 
                 }
])

https://vuejs.org/guide/essentials/list.html#v-for

Answer №1

The initialization of the empty array is correct. The error you are encountering is specific to TypeScript, which presents a different type of issue compared to the functionality-related query you have. Instead of focusing on how to use a ref array of objects, the actual question should be "how do I assign types to a ref array?" The solution lies in utilizing the Ref type, as detailed in the documentation here

import { ref } from 'vue'
import type { Ref } from 'vue'

const results: Ref<object[]> = ref([])

An alternative syntax can also be used:

const results = ref<object[]>([])

While it would be ideal to have a typed object, the decision ultimately rests with you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to eliminate data from a channel title using jQuery?

$(function() { $(".track").draggable({ containment:"document", appendTo:document.body, connectToSortable:"#playlist tbody", revert: true, revertDuration: 0, cursor: "move", helper: "clone", ...

Step by step guide on inserting View and Delete buttons in an HTML table populated by JSON data

I've successfully loaded data from a JavaScript file in JSON format into a plain HTML table using JavaScript. Everything is working well so far. I now want to enhance the table by adding two buttons, View and Delete, that when clicked will redirect to ...

Explore the extensive JSON link for redirecting

I have an issue with accessing the HATEOS link example on PayPal. My browser is showing a syntax error when I try to access the link. SyntaxError: missing ) after argument list [Break On This Error] alert(links.1.href); (line 32, col 15) The JSON d ...

Which API is utilized by duojs for its JavaScript modules?

I am currently utilizing duojs, a front-end web development tool similar to browserify or component. With duojs, you can directly import css and js from the file itself without any external package manifests. While I'm trying to figure out how to wri ...

Is there a way to restrict the date-picker in vue to only allow Mondays?

Is there a way to customize the v-data-picker component in my Vue project so that only Mondays are allowed to display, with all other days being disabled? Here is the code I currently have: <template> <v-row justify="center"> & ...

Modifications made to Vue components do not prompt Jest to automatically restart

I have a section of my package.json file that looks like this: { ... "scripts": { "test:unit": "jest --no-cache", ... }, "jest": { "transform": { "^.+\\.js$": "babel-jest", "^.+\\.vue$": "vue-jest" } ...

My server keeps crashing due to an Express.js API call

I'm completely new to express.js and API calls, and I'm stuck trying to figure out why my server keeps crashing. It works fine the first time, rendering the page successfully, but then crashes with the error: TypeError: Cannot read property &apo ...

There seems to be a connection issue between my Jquery and HTML, as they

I've hit a roadblock because my jQuery isn't connecting and I can't seem to figure out why. It's been stumping me for hours. Here is the HTML code snippet from exercise6.html: <!DOCTYPE html> <html lang="en> <h ...

What is the process for triggering an Event in VueJS 3 without using a component?

I have a tool that performs a function to delete certain elements. After this action is completed, I want to send a signal to the main section to update its information. <template> <div class="q-pa-md row items-start q-gutter-md"> ...

Error in Charts API - [draw function failed to render for one or more participants]

Currently encountering an error on the client side where one or more participants failed to draw. I am able to successfully output data in the drawVisualization call, indicating that the issue lies within the JavaScript code. Despite following examples, I ...

SyntaxError was not caught and an unexpected token export occurred at line 2371 in the popper.js file

I'm a beginner with bootstrap and jquery, and I'm attempting to utilize the datatables feature for sorting. However, when I run my code, I encounter the following error in the console: uncaught SyntaxError: Unexpected token export at popper.js:2 ...

Retrieve data from the controller of the selected element on the subsequent page using AngularJS

Currently, I am in the process of developing an ecommerce platform using angularjs. In my controller, I have a list of various products structured like this: $scope.products = [ {imgLink: 'product1.jpg', name: 'Wingtip Cognac Oxford&apo ...

Animate the React Bootstrap modal only when it is shown or hidden

I am experimenting with the idea of transitioning smoothly from one modal to another in bootstrap Modals for react (using react-bootstrap). However, I am facing challenges due to the fade CSS class causing flickers and unwanted animations. My goal is to h ...

What is the best way to create a continuous loop of images on a never-ending

Many discussions cover similar topics, but I have not yet found a solution to my specific question. Currently, I am working on creating a model for a website and I am interested in incorporating an infinite rotating gallery with a limited number of images ...

All menus effortlessly sliding out simultaneously

I'm having an issue with my navigation bar. I want each link to slide its corresponding DIV up or down when clicked. However, all the DIVs are sliding and when clicking on the same link everything slides up. How can I fix this problem? This is my HT ...

What is the best way to implement onChange for multiple form fields in Reactjs?

Can anyone help me troubleshoot my form? I'm having issues with typing into the fields and nothing happens when I try. Initially, whatever text I input would show up in all the fields simultaneously, but after making some changes, it stopped working ...

Creating a Node.js API using express and mysql to retrieve various data including record count, page number, and implementing pagination functionality

How can I efficiently retrieve and display total_record_count, page_number, page_size, total_pages, has_more information in the response while implementing pagination given that I am limiting my query to 100 results? What would be the most effective approa ...

Encountering connection refusal error while integrating vue-socket-io with VueJS

I am currently utilizing the vue-socket-io plugin in combination with Vue.js 2, however, I am encountering an issue right from the start. It appears that I am unable to establish a connection with Socket.IO. Despite following the provided documentation dil ...

Regularly send requests to an Express server using the $.get function

Operating an Express server with a time generator to send generated time data to the client page gtm.hbs. How can I implement regular polling of the server from the client using Ajax? Displayed below is the server-side code located in \routes\ge ...

Encountering the error message "Cannot GET /" in a NodeJS Express

I've been experimenting with various approaches to resolve this issue, ranging from app.use(express.static(__dirname + "public")) to res.render. It seems to function correctly in my terminal environment but fails when I try to access it locally. Can a ...