Fix API URL

[jameelkaisar]

The previous URL was not working properly.
The URL on CodePen also needs to be changed.

[netlify]

✅ Deploy Preview for vuejs-docs-v2 ready!

Name	Link
🔨 Latest commit	826c457
🔍 Latest deploy log	https://app.netlify.com/sites/vuejs-docs-v2/deploys/63557aa886b82c00097d13f5
😎 Deploy Preview	https://deploy-preview-2973--vuejs-docs-v2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[Jinjiang]

@cfjedimaster would you mind taking a look at this PR and the corresponding CodePen of yours? Thanks.

[cfjedimaster]

Hmm, the API isn't responding. Let me check w/ Netlify.

[cfjedimaster]

So - the site is up and running. When I hit the function, I get no response. I haven't looked at the code for the site in 3 years. So yeah, this PR should be accepted as the URL -is- fixed, but the actual function isn't reliable anymore. I'd probably suggest rewriting the demo to hit a fake API so we aren't reliant on an external site.

[jameelkaisar]

Sorry, I didn't quite understand what you mean by hitting a fake API. Can you explain a bit more?

[cfjedimaster]

Instead of hitting a 'real' API, we run a method that has a fake delay, lets say 2 seconds, and returns static data (well, dynamic based on name, if i remember correctly how the old function worked).

[jameelkaisar]

You mean something like this?

async function validator(text) {
  return new Promise(resolve => setTimeout(() => resolve(text.length >= 6 ? {
    status: 204,
    message: "OK"
  } : {
    status: 400,
    error: "Product name length should be greater than or equal to 6."
  }), 2000))
}

const app = new Vue({
  el: '#app',
  data: {
    errors: [],
    name: ''
  },
  methods: {
    checkForm: function(e) {
      e.preventDefault();

      this.errors = [];

      if (this.name === '') {
        this.errors.push('Product name is required.');
      } else {
        validator(this.name)
          .then(async res => {
            if (res.status === 204) {
              alert(res.message);
            } else if (res.status === 400) {
              this.errors.push(res.error);
            }
          });
      }
    }
  }
})

But I think since this code is under Server-side Validation, using a fake API isn't the best thing to do. But if you think using a fake API is still a better option (surely in the long run), I can commit the modified code.

[cfjedimaster]

Oh I feel dumb. I forgot the serverless function returns status 204 on success, with no content. The function is working fine as is, I just didn't realize. I saw just accept the PR and move on! :)

[jameelkaisar]

Can anyone having access of the CodePen modify the apiUrl from https://vuecookbook.netlify.com/.netlify/functions/product-name?name= to https://vuecookbook.netlify.app/.netlify/functions/product-name?name= ?

[cfjedimaster]

That's me - and done. :)

[jameelkaisar]

Thanks :)