Vue/Axios - 使用 url 中的表单数据修补请求？

大佬教程收集整理的这篇文章主要介绍了Vue/Axios - 使用 url 中的表单数据修补请求？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决Vue/Axios - 使用 url 中的表单数据修补请求？？

我绝对是 vue/axios/express 等方面的初学者。 我尝试构建一个rest API来保存客户信息。

一个客户有 2 个值。一个名称和一个网站名称。 一切都按预期进行，但我无法更新客户

我想问题是我使用网站名称来查找/删除/更新这样的客户：

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

问题是，当我更改网站名称时，axios 会使用更新后的值（不存在）调用 url？

子组件：

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

有什么办法可以解决吗？ Axios 补丁请求应该使用 url 中的“旧”网站名称，但将其更新为新的。

解决方法

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

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

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

大佬总结

以上是大佬教程为你收集整理的Vue/Axios - 使用 url 中的表单数据修补请求？全部内容，希望文章能够帮你解决Vue/Axios - 使用 url 中的表单数据修补请求？所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。