时间戳

首页 > 解决方案 > Vue 应用程序获取 API 数据，对象似乎加入了我的模板，但没有出现文本

javascript - Vue 应用程序获取 API 数据，对象似乎加入了我的模板，但没有出现文本

问题描述

我创建了一个 Vue 应用程序，它从我的 Django REST API 获取数据并将其显示在页面上。数据由类似于 {'name': Whitney Portal, 'parent': Inyo National Forest', 'camp_id': 232123} 的对象列表组成

我有一个用户可以输入文本的输入字段，Vue 应用程序将动态显示包含输入文本的所有对象。

似乎应用程序正在将对象加载到模板中，但没有显示任何所需的文本。我想显示营地属性，例如每个对象的名称。

我附上了一个随机字符串“我在这里！” 在生成的每个对象的 html 中，所以我可以看到任何时候显示了多少个对象。然而，这是为每个对象显示的唯一文本。

当我在我的输入字段中输入内容时，对象的数量（以及“我在这里！”的实例）会发生变化。对象按预期响应（我知道要在框中键入什么文本以仅显示一个对象）。例如，如果我输入“Inyo”，则只剩下一个对象（因为我的数据库中只有一个对象具有“Inyo National Forest”作为父属性。

当没有输入任何内容时，显示的对象数量与数据库中的数量相匹配。当我查看开发人员工具 > 网络时，我看到发出了成功的 API GET 请求，并且我看到了响应中的所有数据。

我在控制台中没有收到任何错误。以前有没有其他人遇到过这个问题并解决了？

我正在使用 Django、Django REST 框架和 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 >

    <!--Campground ID Display-->
    <div class="row justify-content-center">
        <div class=" col-12 col-sm-10 col-md-7 text-center solid">
            <div id="show-camps">
                <input type="text" v-model="search" placeholder="search campgrounds"/>
                <div v-for="camp in filteredCamps">
                    <div>
                        {{camp.name}}
                        {{camp.camp_id}}
                        {{camp.parent}}
                        {{ test }}
                    </div>
                    I'm HERE!
                    {{camp.name}}
                    {{camp.camp_id}}
                    {{camp.parent}}
                    {{ test }}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
    <script type="text/javascript" src="{% static 'js/vue.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/main.js' %}"></script>
{% endblock %}

API 响应

[
    {
        "camp_id": "232122",
        "name": "WHITE BRIDGE",
        "parent": "Dixie National Forest"
    },
    {
        "camp_id": "232123",
        "name": "WHITNEY PORTAL",
        "parent": "Inyo National Forest"
    }
]

标签： javascriptdjangoapivue.js

解决方案

问题是 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>

推荐阅读