_vm.form.errors.has is not a function

Hi,

I’m trying to set up a edit page, however while receiving the data (to put in the input fields etc), I get this error. It looks like that its an issue with the vForm.

  data() {
    return {
      form: new Form({
        serverid: '',
        name: '',
        ipaddress: '',
        port: '',
        cfapikey: '',
        description: '',
        coverimg: null,
        serverimg: null
      }),
      coverImgUrl: '',
      serverImgUrl: '',
    }
  },

  async fetch() {
    const data = await this.form.get('/server/' + this.$route.params.serverid)
    this.form.keys().forEach((key) => {
      this.form[key] = data.data[key]
    })
    console.log(this.form)
  },

or just

  async asyncData({ $axios, params }) {
    const data = await axios.get('/server/' + params.serverid)
    return {
      form: new Form(data.data),
      serverImgUrl: '',
      coverImgUrl: ''
    }
  },

always prints out _vm.form.errors.has is not a function it works when I wrap my template to a client-only page, but I need to use SSR in NuxtJS.

[cretueusebiu]

You are returning the form instance from asyncData, but that won’t work with SSR. Here’s how you do it: https://codesandbox.io/s/stoic-minsky-j5pgl?file=/pages/index.vue

[cretueusebiu]

You would just create 2 forms one for create and one for update with only the fields you need for that action. Or do some checks on your back-end.