使用 Vue.js、Axios 和 Django 过滤对象答案

【问题标题】：Filter object with Vue.js, Axios and Django使用 Vue.js、Axios 和 Django 过滤对象
【发布时间】：2019-04-29 03:18:00
【问题描述】：

我有一个使用 Vue.js 和 Django 的项目。我正在尝试通过简单的搜索从数据库中获取列表。在 Vue/Axios 中，我有它：

  var food = 'CHICKEN'
  const url = `${API_URL}/api/list_food_composition/${food}`;
  axios.get(url).then(response => {
  var data = response.data;
  console.log(data)
  });

但响应是“未定义”

在 Django 中，我有它：

urls.py

url(r'^api/list_food_composition/$', views.list_food_composition),

views.py

def list_food_composition(request,food):
    foods = Food_composition.objects.filter(short_description__contains=food)
    data = serializers.serialize('json', foods)
    return HttpResponse(data, content_type='application/json')

正确的做法是什么？

【问题讨论】：

console.log(response) 给了什么？
粗体字。它响应“未定义”

标签： django vue.js axios

【解决方案1】：

请像这样更新您的视图：

from django.http import JsonResponse

def list_food_composition(request,food):
     foods = Food_composition.objects.filter(short_description__contains=food)
     data = serializers.serialize('json', foods)
     return JsonResponse({'data': data}, content_type='application/json')

网址应该是：

url(r'^api/list_food_composition/(?P<food>\w+)$', views.list_food_composition),

【讨论】：

在我看来，您可以解释一下，而不仅仅是发布代码。