Как использовать PUT для обновления чего-либо в Vue с использованием Django REST framework

Question

Я новичок в Vue, но у меня есть опыт работы с Django. Я использую этот шаблон из Github: https://github.com/gtalarico/django-vue-template

Мне действительно нравится структура этого шаблона, потому что он вообще не перегружен и не написано много кода для успешного взаимодействия с внутренним APIDjango.

У него уже есть GET, POST & DELETE, предварительно установленные и подключенные к Django REST. Все идет нормально. Однако я пытаюсь добавить метод PUT, чтобы обновить модели. Я пытаюсь следовать той же структуре, но не могу заставить ее работать.

Мой productService.js:

import api from '@/services/api'

export default {
  fetchProducts() {
    return api.get(`products/`)
              .then(response => response.data)
  },
  postProduct(payload) {
    return api.post(`products/`, payload)
              .then(response => response.data)
  },
  deleteProduct(proId) {
    return api.delete(`products/${proId}`)
              .then(response => response.data)
  },
  updateProduct(proId) {
    return api.put(`products/${proId}`)
              .then(response => response.data)
  }
}

Обновление продукта - это новый код, который я добавил.

Тогда в магазине -> products.js:

const actions = {
  getProducts ({ commit }) {
    productService.fetchProducts()
    .then(products => {
      commit('setProducts', products)
    })
  },
  addProduct({ commit }, product) {
    productService.postProduct(product)
    .then(() => {
      commit('addProduct', product)
    })
  },
  deleteProduct( { commit }, proId) {
    productService.deleteProduct(proId)
    commit('deleteProduct', proId)
  },
  updateProduct( { commit }, proId) {
    productService.updateProduct(proId)
    commit('updateProduct', proId)
  }
}

const mutations = {
  setProducts (state, products) {
    state.products = products
  },
  addProduct(state, product) {
    state.products.push(product)
  },
  deleteProduct(state, proId) {
    state.products = state.products.filter(obj => obj.pk !== proId)
  },
  updateProduct(state, proId) {
    state.products = state.products.filter(obj => obj.pk !== proId)
  }
}

Здесь я снова добавил обновление Product.

Тогда в моих продуктах.vue:

......
<b-tbody>
      <b-tr v-for="(pro, index) in products" :key="index">
        <b-td>{{ index }}</b-td>
        <b-td variant="success">{{ pro.name }}</b-td>
        <b-td>{{ pro.price }}</b-td>
        <b-td>
            <b-button variant="outline-primary" v-b-modal="'myModal' + index">Edit</b-button>
                <b-modal v-bind:id="'myModal' + index"   title="BootstrapVue">         
                    <input type="text" :placeholder="pro.name" v-model="name">
                    <input type="number" :placeholder="pro.price" v-model="price">
                <b-button type="submit" @click="updateProduct(pro.pk)" variant="outline-primary">Update</b-button>                
            </b-modal>           
        </b-td>
        <b-td><b-button @click="deleteProduct(pro.pk)" variant="outline-primary">Delete</b-button></b-td>
      </b-tr>

.....

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: "Products",
  data() {
    return {
      name: "",
      price: "",
    };

  },
  computed: mapState({
    products: state => state.products.products
  }),
  methods: mapActions('products', [
    'addProduct',
    'deleteProduct',
    'updateProduct'
  ]),
  created() {
    this.$store.dispatch('products/getProducts')
  }
};
</script>

Все отлично работает, кроме действия PUT для обновления продукта. Я подумал, что вы должны использовать идентификатор продукта, чтобы иметь возможность редактировать его с помощью PUT. Вот почему я использовал тот же фрагмент, что и DELETE. Но сейчас я все равно удаляю его вместо редактирования.

Теперь я также использовал заполнитель для отображения текста записи о продукте, что также является неправильным способом. Я хочу использовать модальный режим для редактирования записи о продукте и ее обновления.

Может ли кто-нибудь указать мне правильное направление?