I have successfully developed a Vue application that retrieves data from my Django REST API and displays it on a webpage. The data comprises a list of objects structured as {'name': Whitney Portal, 'parent': Inyo National Forest', 'camp_id': 232123}
Within the app, there is an input field where users can type text, and the Vue app will dynamically show all objects containing the input text.
Although the app seems to be loading objects into the template, none of the desired text is visible. My goal is to showcase the camp attributes, such as the name, for each object.
To track the number of displayed objects at any given time, I appended a random string 'I'm HERE!' in the HTML to each generated object. However, only this text is being shown for each object.
Upon typing in the input field, the count of objects (and occurrences of 'I'm HERE!') changes accordingly. The objects respond as expected (I know what text to input to display only one object). For instance, entering 'Inyo' results in displaying only one object since only one object in the database has 'Inyo National Forest' as a parent attribute.
When nothing is typed, the number of displayed objects aligns with the database count. Inspecting the developer tools > Network reveals a successful API GET request was executed, and the response contains all the data.
No errors are reported in the console. Has anyone else faced this issue before and found a solution?
I am utilizing Django, Django REST Framework, and Vue JS
Vue app
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);
});
}
}
})
My template
<!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 Response
[
{
"camp_id": "232122",
"name": "WHITE BRIDGE",
"parent": "Dixie National Forest"
},
{
"camp_id": "232123",
"name": "WHITNEY PORTAL",
"parent": "Inyo National Forest"
}
]