Vue/Axios - patch request using form data in url?

Question

Im an absolutly beginner in vue/axios/express etc. I try to build a rest api to save customer informations.

A customer has 2 values. A name and a website name. Everything works like expected but i cant update the customers

i guess the problem is that i use the website name to find/delete/update customers like this:

// express controller : 
    update : async (req,res) => {
            let customer = await CustomerModel.findOne({website: req.params.website})
            if (req.body.website) {
                customer.website = req.body.website
            }
            if (req.body.name) {
                customer.name = req.body.name
            }
            let savedCustomer = await customer.save()
            res.send(savedCustomer)
    },


// route
router.patch('/customer/:website', CustomerController.update) 

// vue/axios : 

// template 
<template>
  <div class="content-container pl-15 pr-15" >
    <Customer 
        v-for="customer in customers" 
        v-bind:key="customer._id" 
        v-bind:customer="customer"
        @on-update-customer="updateCustomer(customer.website,customer.name)"
    />
  </div>
</template>

// method
updateCustomer : function(website, customerName) {
   axios
      .patch('http://localhost:3000/api/customer/' + website, {
             name : customerName,
             website : website
      })
},

the problem is that when i change the website name, axios calls a url with the updated value (which not exist)?

child component:

<template>
    <div class="customer mb-15 pt-10 pb-10 pl-10 pr-10">
            <div class="customer-header">
                <div class="customer-infos">
                    <div class="customer-name mr-15">
                        <small>Kunde:</small>
                        <input
                            type="text"
                            v-model="customer.name"
                        />
                    </div>
                    <div class="customer-website mr-15">
                        <small>Webseite:</small>
                        <input 
                            type="text"
                            v-model="customer.website"
                        />
                    </div>
                </div>
                <div class="customer-actions pl-15">
                    <span class="mr-10">
                        {{contentList.length > 1 ? contentList.length + ' Inhalte' : contentList.length + ' Inhalt' }} 
                    </span>
                    <i 
                        :class="['fas', isHidden ? 'fa-arrow-circle-down show' : 'fa-arrow-circle-up' ]" 
                        title="Zeige Inhalte"
                        @click="isHidden = !isHidden"
                    />
                    <i 
                        class="far fa-save" 
                        title="Kundendaten speichern"
                        @click="$emit('on-update-customer')"
                    />
                    <i 
                        class="fas fa-minus-circle remove"
                        title="Kunde löschen"
                        @click="$emit('on-delete-customer')"
                    />
                </div>
            </div>
            ........

Is there any way to fix it? Axios patch request should use the "old" website name in the url but update it to the new one.

Answer 1

You have to store the original website name in a separate property. Or ideally this would be an id instead.

Store the website name twice when it's first retrieved from the server. For example:

Component

data: () => ({
  customer: {
    name: '',
    website: '',
    websiteOld: ''
  }
}),
created() {
  axios.get(...).then(customer => {
    this.customer = {
      name: customer.name,
      website: customer.website,
      websiteOld: customer.website
    }
  });
}

Adjust your event handler:

Component

@on-update-customer="updateCustomer(customer)"  

updateCustomer : function(customer) {
  axios.patch('http://localhost:3000/api/customer/' + customer.websiteOld, customer) 
},