javascript - 使用 vuex 编辑和更新产品名称

Question

我有产品数据表。在每行单击中，它将打开一个带有 3 个字段（类别、名称、可用）的编辑对话框表单。我想编辑和更新名称文本字段并显示到 dat 表中。

所以在这里我将选定的产品存储在每一行点击上。现在我正在这样做。

这是服务电话

    export async function updateProductNames(id,categoryId,details) {
    const response = await http.put(`/products/${id}/category/${categoryId}`,details);
    return response.data;
}

Vuex 动作

async updatedProductName({commit,state,dispatch}) {
  const{ product,selectedProducts} = state;
  const id = product.id;
  const categoryId = selectedProducts.category_id;
 try {
    const res = await service.updateContactNames(id,categoryId,selectedProducts);
    console.log(res);
    dispatch('hideProductsModal');
 }catch (error) {
    const message = error.response ? error.response.status : null;
    commit('updateErrorMessage', message);
  }
}

我正在向我的模态组件和网络响应发送操作，我正在使用更新的名称获得更新的响应。但是，数据表显示基于 productDetails 状态的数据。如何更新相同并显示到数据表中。

在这里，

state.productDetails = data // giving table data
state.selectedProducts = data // giving selected row data

传递 selectedProducts 可以正常响应，但我将如何使用更新的名称更改产品详细信息状态，以便我们可以显示更新的表数据。

标签： javascriptvue.jsvuejs2