How to nest object data in Vue CLI3 with Typescript?

Question

In plain js we could write:

data() {
  return {
    form: {
      name: '',
      password: ''
    }
  }
}

But how to achieve this using typescript (vue-property-decorator)? I've read this should be implemented using interfaces, like that:

interface Form {
  name: string
  password: string
}

@Component
export default class Login extends Vue {
  // how to use interface here?
}

I'm using this as v-model on input:

<input v-model="form.email">

Kokodoko · Accepted Answer · 2019-04-28 16:01:47Z

1

Your class component can have a property form which is of type Form

interface Form {
  name: string
  password: string
}

@Component
export default class Login extends Vue {
  form:Form = {name: '', password: ''}
}

Didn't test this though!

EDIT

An example of an interface that uses interfaces itself

interface Form {
   users : User[]
   password : string
}

interface User {
   name : string
   id : number
}

let form : Form = {
   users: [
     { name:"Ren", id:3 },
     { name:"Stimpy", id:43 }
   ],
   password: ''
}

edited Apr 28, 2019 at 16:01

answered Apr 28, 2019 at 10:59

Kokodoko

28.3k37 gold badges132 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alexander Kim Over a year ago

It works, indeed. Could you explain a bit deeper - interfaces are just my like custom types? What if i wanted to nest 1 level deeper?

Kokodoko Over a year ago

Yes, interfaces are used as custom types, and you can let Classes subscribe to interfaces too. If your Form contains sub objects you can just make interfaces for those too. I edited the answer with an example.

Collectives™ on Stack Overflow

How to nest object data in Vue CLI3 with Typescript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related