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

Question

我是 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 中使用“旧”网站名称，但将其更新为新名称。

Answer 1

您必须将原始网站名称存储在单独的属性中。或者理想情况下，这将是一个 id。

首次从服务器检索网站名称时，将其存储两次。例如：

组件

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