_vm.form.errors.has is not a function

[Snakzi]

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]

Can you create a reproduction demo ? (You can use https://codesandbox.io)

[Snakzi]

I'm not very familiar with Sandboxes. If you already have a template for a sandbox with Nuxt + vForm, I can probably recreate it.

But I created a gist of my edit page, this is the only page affected.
https://gist.github.com/Snakzi/de8a64459d95f822e9a2c43a032aec2e

Also, I'm using your laravel-nuxt package (which is very good for beginners like me)

[Snakzi]

API-response is this: https://i.imgur.com/4WQgi7C.png

[Snakzi]

Hello @cretueusebiu

I managed to set a sandbox up somehow. It spits out an error with vue-loader but the issue is almost the same.
If you go from a nav-link (from About -> Go to issue) you'll see that the input field stays. But if you refresh the page on the issue page, it gets removed and NORMALLY spits out the error "_vm.form.errors.has is not a function"

https://codesandbox.io/s/crimson-thunder-hu7ki

[Snakzi]

It looks like that the form is not getting filled correctly.
Because when I try to send it again, I also get an error "undefined". It's a really weird behaviour but the only option I know on how to create an edit page.

[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

[Snakzi]

You are a life saver! Thank you very very much.
Last question:

How would I set the post query so that the backend doesnt show it needs a file when the user does not change the image. Can you exclude specific data (for example serverimg) from a form.patch method?

[cretueusebiu]

I don't think I understand what you're trying to do...

[Snakzi]

Okay, so I have a edit page /edit/:id each post has 2 images. (cover image and logo image) those are required fields when creating a post. but if you want to edit something, but not update the images, I need to know if theres a way to tell vform that the image vars shouldnt be posted because it would send the image url back to my backend but my backend expects a file.

[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.