我创建了一个 Vue 应用程序，它从我的 Django REST API 获取数据并将其显示在页面上。数据包含类似于 {'name': Whitney Portal, 'parent': Inyo National Forest', 'camp_id': 232123} 的对象列表我有一个输入字段，用户可以在其中输入文本，Vue 应用程序将动态显示包含输入文本的所有对象。应用程序似乎正在将对象加载到模板中，但没有显示所需的文本。我想显示营地属性，例如每个对象的名称。我附上了一个随机字符串“我在这里！” 在生成的每个对象的 html 中，所以我可以看到在任何时候显示了多少个对象。然而，这是为每个对象显示的唯一文本。当我在输入字段中键入内容时，对象的数量（以及“我在这里！”的实例）会发生变化。对象按预期响应（我知道要在框中键入什么文本才能只显示一个对象）。例如，如果我输入“Inyo”，则只剩下一个对象（因为我的数据库中只有一个对象将“Inyo 国家森林”作为父属性。如果未输入任何内容，则显示的对象数量与数据库中的数量相匹配。当我查看开发人员工具 > 网络时，我看到发出了一个成功的 API GET 请求，并且我在响应中看到了所有数据。我在控制台中没有收到任何错误。有没有其他人遇到过这个问题并解决了它？我正在使用 Django、Django REST Framework 和 Vue JSVue应用程序const App = new Vue({ el: '#show-camps', data() { return { campgrounds: [], search: '', test: 'test', }; }, async created() { const response = await fetch('http://localhost:8000/api/campgrounds/'); this.campgrounds = await response.json(); }, methods: { }, computed: { filteredCamps: function(){ return this.campgrounds.filter((camp) => { return camp.parent.match(this.search); }); } }})我的模板<!DOCTYPE html>{% extends 'base/base.html' %}{% load static %}{% block title %}Campground List{% endblock %}{% block content %}<div class="container-fluid"> <div class="row justify-content-center"> <div class="head col-12 col-sm-10 col-md-7 text-center solid"> <h1>List of all campgrounds</h1> <p>Here is a list of some campground IDs that I've collected.</p> <hr> </div> </div >
1 回答
拉丁的传说
TA贡献1789条经验 获得超8个赞
问题是 Vue 和 Django 都使用相同的mustache 模板语法来显示变量，所以你所有的{{ camp.name }}位都试图显示服务器端变量。
正确解决这个问题的方法是告诉 Django 不要使用标签处理verbatim标签
{% verbatim %}
<div id="show-camps">
<!-- all your Vue template code goes here -->
</div>
{% endverbatim %}
另一种选择是使用delimiters选项配置 Vue。例如
const App = new Vue({
el: '#show-camps',
delimiters: ["[[", "]]"],
// etc
})
然后在您的 HTML 模板中
<div>
[[ camp.name ]]
[[ camp.camp_id ]]
[[ camp.parent ]]
</div>
添加回答
举报
0/150
提交
取消