Update a Directus collection with fetch()-api in Vue.js

Question

I am trying to update a row from a Directus collection. I read the documentation on the topic, but I'm still not sure how to do it with the fetch() function in the <script> section of my Vue. js code. I want to update the name of the customer and this is my current code. I also tried with method: 'POST', but it doesn't work either.

await fetch('http://localhost:8055/items/customers/' + this.$route.params.id, {
      method: 'PATCH',
      body: JSON.stringify({
          "name": this.name
      })
});

Answer 1

I think even the function that I showed in the question works, but my Directus had to be manually refreshed to show the changes. I had to adjust my Directus to auto refresh every 10 seconds. I also changed my function a bit.

await fetch('http://localhost:8055/items/customers/' + this.$route.params.id, {
    method: 'PATCH',
    body: JSON.stringify({
          name: this.name
    }),
    headers: {
          'Content-type': 'application/json; charset=UTF-8',
    },
})  
    .then((response) => response.json())
    .then((json) => console.log(json));