Question

在普通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">

Answer 1

您的类组件可以具有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: ''
}

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

1 个答案: