Vue 应用程序获取 API 数据，对象似乎加载到我的模板中，但文本没有出现
我创建了一个 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 JS
Vue应用程序
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 >
MMTTMM1回答
-
拉丁的传说
问题是 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>
随时随地看视频慕课网APP
相关分类
JavaScript