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

The functionality of ngModel seems to be malfunctioning when used within select options that are generated inside

I'm currently working on dynamically adding options to an HTML select element within a for loop. I am using [(ngModel)] to get the selected option, but initially no option is pre-selected. Here's a snippet of the code: <table align="center"& ...

Showing specific error messages in an Inertia Vue - Laravel application

My table is dynamic, allowing users to add multiple services with the option to select quantities and apply discounts. <tr v-if="proceduresList.length" v-for="(procedure,index) in proceduresList" :key="procedure.id"> ...

Utilize the #value template in PrimeVue Dropdown to retrieve country code for setting the default selected flag

In the student edit modal, I have a Dropdown where I need to display a flag for the default country. When using PrimeVue, I can access the country code from a template using #option="slotProps", but not with #value="slotProps". This m ...

What is the best way to first identify and listen for changes in a form

In Angular, there are reactive forms that allow you to track changes in both the complete form and specific fields: this.filterForm.valueChanges.subscribe(() => { }); this.filterForm.controls["name"].valueChanges.subscribe(selectedValue => { }); ...

Set the text for the "Select All Items" option in the PrimeVue Multiselect component to be customized

With PrimeVue, you have the option to include a header in the Multiselect component. This header appears above the checkbox used to select all items. To customize the appearance of the header, you can use the following CSS solution: div.customClassName .p ...

Enhancing Angular Material forms with custom background colors

I'm new to Angular and Angular material, still learning the ropes. I have been trying to create a form and needed to change the background color to Red. However, when I attempted to do so, the red color ended up covering the entire form instead of ju ...

Writing TypeScript, Vue, and playing around with experimental decorators

After creating a Vue project through Vue-CLI v3.0.0-beta.15, the project runs smoothly when using npm run serve. However, TypeScript displays an error message stating that support for decorators is experimental and subject to change in a future release, bu ...

Formik QR code reader button that triggers its own submission

I recently developed a custom QR code reader feature as a button within the Formik component customTextInput.tsx, but I encountered an issue where clicking on the button would trigger a submission without any value present. The following code snippet show ...

Updating reactive objects in Vue.js 3 while maintaining reactivity without any loss

I'm looking for the best approach to update a reactive object with data after fetching it: setup(){ const formData = reactive({}) onMounted(() => { fetchData().then((data) => { if (data) { formData = data //is ...

Display an image corresponding to the selected radio button option

Looking for guidance on implementing this in VueJS You can find a starting point here I think it involves index matching, similar to how I did it with jQuery like this: $('.Colors > li').on('mouseenter', function() { var i = ...

Is it possible to use a v-for loop within F7+Vue to dynamically update the title of each accordion item?

Is there a way to dynamically update the title of each accordion-item using a v-for loop in F7+Vue? I want the title of each accordion-item to match the Title property of the objects in my myList array that is being iterated through. Here is an example: ...

Strategies for iterating over an array in React with TypeScript

I'm currently working on looping through an array to display its values. Here's the code I have: ineligiblePointsTableRows() { return this.state[PointsTableType.INELIGIBLE].contracts.map(contract => { return { applied: (&l ...

Creating a bezel design in CSS or Vue: A step-by-step guide

Embedding: Is there a CSS property that can be used to create the same angle as shown in the layout? I looked everywhere in the program but couldn't find this specific property. Tried searching here !: ...

Struggling to utilize a personalized filter leads to the error message: "Unable to call a function without a designated call signature."

Trying to use a custom filter from an Angular controller is resulting in the error message: 'Cannot invoke an expression whose type lacks a call signature'. I successfully implemented this on my last project, so I'm confused about what coul ...

What is the best way to utilize ngStyle in combination with Interpolation?

Within my application, I am faced with a challenge involving two slide bars that generate values ranging from 1 to 100. Based on these generated values, I aim to adjust the margin of a div element in accordance with the percentage output. Despite conductin ...

Testing Angular: Implementing Mock Classes and Services using the Any Data Type

When mocking services without using TestBed and instead relying on Fake Classes, is it considered a best practice to use a Mock with the : any data type? If not, errors like missing items/parameters may occur. Although spyOn can be used as an alternative, ...

Is it possible to devise a universal click handler in TypeScript that will consistently execute after all other click handlers?

In my ReactJS based application written in TypeScript, we have implemented various click handlers. Different teams contribute to the application and can add their own handlers as well. The challenge we face is ensuring that a specific global click handler ...

Tips for passing an object as an argument to a function with optional object properties in TypeScript

Consider a scenario where I have a function in my TypeScript API that interacts with a database. export const getClientByEmailOrId = async (data: { email: any, id: any }) => { return knex(tableName) .first() .modify((x: any) => { if ( ...

The reactivity of a Vue.js computed property diminishes when it is transmitted through an event handler

Within my main application, I've implemented a Modal component that receives content via an event whenever a modal needs to be displayed. The Modal content consists of a list with an associated action for each item, such as "select" or "remove": Vue. ...

Tips for Decreasing Query Time with MatTable and MatTableDataSource

When working with my firestore database, I am trying to query documents and display them while also calculating the total value of a specific column (promiAmount). I have successfully displayed the values in a mat table, but I'm struggling to calcula ...