Defining a property of an object within a Vue Class

If I were to write it in JavaScript version:

export default {
  data() {
    return {
      users: {}
    }
  }
}

However, when using a class style component with vue-property-decorator:

@Component
export default class Login extends Vue {
  public title: string = 'something'
}

I am able to set strings/numbers easily, but how can I set an object?

To set the users object, it should look like this:

{
  response: {
    users: [
      {
        user_email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e3f4e6b766f637e626b">[email protected]</a>',
        user_password: 'password'
      },
      {
        user_email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="784a381d00191508141d">[email protected]</a>',
        user_password: 'password'
      }
    ]
  }
}

Answer №1

const DEFAULT_OBJECT: ObjectType = {
        prop1: "value1",
        prop2: "value2
    };

To initialize an object, follow these steps:

public myObject: ObjectType = DEFAULT_OBJECT;

If you want to accept an object as a property, do the following:

@Prop({ default: () => (DEFAULT_OBJECT) })
public myObject: ObjectType;

For User objects, create an interface like this:

interface User {
    email: string;
    password: string;
}

const DEFAULT_USERS: User[] = [
    {
        email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d2f3d19dd0dcdcde">[email protected]</a>',
        password: 'abc'
    },
    {
        email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8ba98baf6bbb7b7b5">[email protected]</a>',
        password: 'abc1'
    }
];

Lastly, in your component, declare the users property as shown:

export default class UserDetails extends Vue {
    public users: User[] = DEFAULT_USERS;
}

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

Issue on Ionic serve: Unable to locate module '@angular/compiler-cli/ngcc'

i encountered a problem after installing a cordova plugin and running "npm audit fix". When attempting to serve my app, an error message pops up: [ng] An unhandled exception occurred: Cannot find module '@angular/compiler-cli/ngcc' [ng] See ...

Ways to implement debounce in handling onChange events for input fields in React

I've been attempting to implement debounce functionality in my React app without relying on external libraries like lodash or third-party node modules. I've tried various solutions found online, but none have worked for me. Essentially, in the h ...

mentioning a JSON key that includes a period

How can I reference a specific field from the JSON data in Angular? { "elements": [ { "LCSSEASON.IDA2A2": "351453", "LCSSEASON.BRANCHIDITERATIONINFO": "335697" }, { "LCSSEASON.IDA2A2": "353995", "LCSSEASON.BRANCHIDITER ...

Is it possible to overlook specific attributes when constructing an object using TypeScript interfaces?

I have defined an interface with various properties. I am looking to instantiate an object based on this interface, but I only want to partially initialize some of the properties. Is there a way to accomplish this? Thank you. export interface Campaign { ...

Tips for eliminating webpack:// from appearing in browser sources

Currently, I am utilizing a webpack template for my Vue.JS website, which can be found here. After deploying the application, everything seems to be functioning properly. However, upon inspecting the developer tools in Chrome and navigating to Sources, I ...

Chrome can't locate VueJS locally

Recently, I encountered an issue where when trying to access http://localhost:8080/ in Chrome, I was redirected to a bad request page generated by the browser itself. However, if I accessed the network URL, for example, http://192.168.1.1:8080/, Chrome loa ...

What are the steps to incorporate SignalR into a TypeScript project?

Working on an asp.net mvc 4.5 project with typescript in the client side, I successfully installed and configured signalR on the server side. To integrate it into my project, I also installed signalr.TypeScript.DefinitelyTyped with jquery. In my typescrip ...

The copy-webpack-plugin is causing an error by prohibiting the use of an import statement outside of

Recently, I incorporated a JS library as a git submodule into my Vue.js project and placed it in the root directory. To import the JS file from this git submodule by adding a <script> tag to my index.html, I configured webpack to copy files using the ...

What is the best way to utilize resolve and promises in Angular2 to ensure that data is loaded from the server before rendering a page in the

I am currently developing an Angular 6 application with the requirement to load dynamic routes from a database. To achieve this, I have created a service class called DynamicRoutingService which is responsible for loading both static and dynamic routes fro ...

Simulated database in a Service using TypeScript with Node

Struggling with a unit test, I need to mock the this.orderRepository.findById(id); method to find an object by its ID. Although I've set the return value, the test keeps failing. This is my first time creating a unit test in Node using TypeScript and ...

Determining the appropriate scenarios for using declare module and declare namespace

Recently, I came across a repository where I was exploring the structure of TypeScript projects. One interesting thing I found was their typings file: /** * react-native-extensions.d.ts * * Copyright (c) Microsoft Corporation. All rights reserved. * Li ...

Having trouble converting a JSON array into a JavaScript array upon creation

I have encountered this question multiple times before and despite trying various solutions, I have not been able to find success. Summary: My goal is to retrieve the array from the classes.json file and then assign the data in the variable classes from d ...

Tips for arranging datasets in React Chart.js 2 to create stacked bar charts

Currently, I am facing an issue with sorting the datasets displayed in each stacked bar chart in descending order as they are showing up randomly. Here is the snippet of my code: import React from 'react'; import { Chart as ChartJS, CategoryS ...

I'm having some trouble with this search filter in Vue 2 - is it failing to display the items as expected

After struggling with this issue for over a week, I've hit a roadblock and need some assistance. I'm currently working on implementing a search filter in Vue 2 with Vuetify, but something isn't quite right. Here's a snippet of the sea ...

Having trouble integrating CKEditor into a React Typescript project

Error: 'CKEditor' is declared but its value is never read.ts(6133) A declaration file for module '@ckeditor/ckeditor5-react' could not be found. The path '/ProjectNameUnknown/node_modules/@ckeditor/ckeditor5-react/dist/ckeditor.js& ...

The design of Next.js takes the spotlight away from the actual content on the

Recently, I've been working on implementing the Bottom Navigation feature from material-ui into my Next.js application. Unfortunately, I encountered an issue where the navigation bar was overshadowing the content at the bottom of the page. Despite my ...

Decipher the splitButton tag from PrimeNG

I am currently attempting to translate items from "p-splitButton", but I am facing a challenge because the "items" is an object. How can I accomplish this task? [model]="items | translate" app.component.html <p-splitButton label="Save" icon="pi pi- ...

React app's compilation is failing due to non-compliant ES5 code generation of the abab module, resulting in errors on IE

Can anyone explain why a create-react-app project using TypeScript and configured to generate ES5 code is not functioning on IE11 due to the "atob" function from the 'abab' package not being compiled into ES5 compliant code? module.exports = { ...

Having trouble with Vue component registration repeatedly failing

Currently, I am working on a front-end project using [THIS VUE TEMPLATE][https://www.creative-tim.com/product/vue-material-dashboard-pro] The issue I am facing involves trying to register a component locally and encountering the following error: "1 ...

Exploring the depths of object properties with Angular, JavaScript, and TypeScript: A recursive journey

Let's consider an object that looks like this: const person = { id: 1, name: 'Emily', age: 28, family: { mother: { id: 101, name: 'Diana', age: 55 }, fathe ...