时间戳

首页 > 解决方案 > 如何使用 Typescript 在 Vue CLI3 中嵌套对象数据？

typescript - 如何使用 Typescript 在 Vue CLI3 中嵌套对象数据？

问题描述

在普通的 js 中，我们可以这样写：

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

但是如何使用打字稿（vue-property-decorator）来实现这一点？我读过这应该使用接口来实现，如下所示：

interface Form {
  name: string
  password: string
}

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

我将其用作v-model输入：

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

标签： typescriptvue.js

解决方案

你的类组件可以有一个form类型的属性Form

interface Form {
  name: string
  password: string
}

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

虽然没有测试这个！

编辑

使用接口本身的接口示例

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: ''
}

推荐阅读