我創(chuàng)建了一個 Vue 應(yīng)用程序，它從我的 Django REST API 獲取數(shù)據(jù)并將其顯示在頁面上。數(shù)據(jù)包含類似于 {'name': Whitney Portal, 'parent': Inyo National Forest', 'camp_id': 232123} 的對象列表我有一個輸入字段，用戶可以在其中輸入文本，Vue 應(yīng)用程序?qū)討B(tài)顯示包含輸入文本的所有對象。應(yīng)用程序似乎正在將對象加載到模板中，但沒有顯示所需的文本。我想顯示營地屬性，例如每個對象的名稱。我附上了一個隨機字符串“我在這里！” 在生成的每個對象的 html 中，所以我可以看到在任何時候顯示了多少個對象。然而，這是為每個對象顯示的唯一文本。當(dāng)我在輸入字段中鍵入內(nèi)容時，對象的數(shù)量（以及“我在這里！”的實例）會發(fā)生變化。對象按預(yù)期響應(yīng)（我知道要在框中鍵入什么文本才能只顯示一個對象）。例如，如果我輸入“Inyo”，則只剩下一個對象（因為我的數(shù)據(jù)庫中只有一個對象將“Inyo 國家森林”作為父屬性。如果未輸入任何內(nèi)容，則顯示的對象數(shù)量與數(shù)據(jù)庫中的數(shù)量相匹配。當(dāng)我查看開發(fā)人員工具 > 網(wǎng)絡(luò)時，我看到發(fā)出了一個成功的 API GET 請求，并且我在響應(yīng)中看到了所有數(shù)據(jù)。我在控制臺中沒有收到任何錯誤。有沒有其他人遇到過這個問題并解決了它？我正在使用 Django、Django REST Framework 和 Vue JSVue應(yīng)用程序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 >
Vue 應(yīng)用程序獲取 API 數(shù)據(jù)，對象似乎加載到我的模板中，但文本沒有出現(xiàn)
MMTTMM
2023-03-03 09:35:39
