我創建了一個 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 >
Vue 應用程序獲取 API 數據，對象似乎加載到我的模板中，但文本沒有出現
MMTTMM
2023-03-03 09:35:39
