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

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)?

enter image description here

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

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) 
},

Leave a Reply

Your email address will not be published. Required fields are marked *