在 Axios、Vue JS 中使用 Django 模式传递 ID Mitch mech答案

【问题标题】：Passing ID Mitch mech with Django Pattern in Axios, Vue JS在 Axios、Vue JS 中使用 Django 模式传递 ID Mitch mech
【发布时间】：2021-12-19 00:00:21
【问题描述】：

我想通过单击 Datatable 按钮来更新和删除。但是，不幸的是，我无法通过 Axios 在 Django Pattern 中传递 PK=ID。

`from django.urls import path
from . import views
from django.views.generic import TemplateView

app_name = 'todospaapp'

urlpatterns = [
    path('', views.index, name='index'),
    path('todos/', views.todos, name='todos'),
    path('save_todo/', views.save_todo, name='save_todo'),
    # path('<pk>/update', views.save_todo_update, name='save_todo_update' ),
    path('save_todo_update/<int:pk>', views.save_todo_update, name='save_todo_update'),
]`

在我看来.py

`def save_todo_update(request, pk): 尝试： todoitem = TodoItem.objects.get(pk=pk)

except TodoItem.DoesNotExist:
    return HttpResponse(status=404)

if request.method == 'GET':
    serializer = TodoItemSerializer(todoitem)
    return JsonResponse(serializer.data)

elif request.method == 'PUT':
    data = JSONParser.parse(request)
    serializer = TodoItemSerializer(todoitem, data=data)
    if serializer.is_valid():
        serializer.save()
        return JsonResponse(serializer.data)
    return JsonResponse(serializer.errors)`

在我的 HTML 中：

<tbody>
            <tr v-for="todo in todos">
                <th scope="row" >[[todo.id]]</th>
                <td>[[todo.text]]</td>
                <td>[[todo.date_created | formatDate]]</td>
                <td>[[todo.date_completed | formatDate]]</td>
                <td><a class="btn btn-primary"  v-on:click="updateTodo(todo.id)" >Update</a></td>
            </tr>
        </tbody>

在 Axios 中：

updateTodo: function(id) {
                axios({
                    url: "{% url 'todospaapp:save_todo_update/'+id %}",
                    method: 'put',
                    data: {
                        todo_text: this.input_todo
                    },
                    headers: {
                        'X-CSRFToken': '{{ csrf_token }}'
                    }
                }).then(response => {
                    // console.log(response.data)
                    this.getTodos()
                })
            }
        },

【问题讨论】：

标签： django vue.js axios

【解决方案1】：

将html中的url改成：

    url: "{% url  'save_todo_update'  id %}",

【讨论】：

【解决方案2】：

您不能使用模板标签来确定 URL，因为模板标签是在服务器而不是客户端解析的，并且 JavaScript 函数在客户端运行。

因此，您应该使用：

axios({
    url: 'save_todo_update/' + id,
    # &vellip;
}).then(response => {
    // console.log(response.data)
    this.getTodos()
})

【讨论】：