使用Vue.js、Axios和Django筛选对象

我有一个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，我有：

url.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')

---

正确的方法是什么？

请按如下方式更新您的视图：

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应该是：

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

url（r'^api/list\u food\u composition/（？P\w+）$，views.list\u food\u composition），

console.log（响应）提供了什么？以粗体显示。It响应“未定义”