I have a small django project and frontend is coded with Vue.js via CDN. So it has only one server for django. And vue is placed into django templates.
DRF is the source of web apis.
Django 2.2.10, DRF 3.11.0 and vue gets the latest from CDN.
Vuetify (again from CDN) gives material UI design with v-app-bar, v-navigation-drawer and v-footer.
Also Vuetify's v-data-table is used for two datasets. (countries and their cities)
I can show the data when the page first responded.
HOWEVER, when the drawer is closed with a button click or when the 'rows per page' of v-data-table has changed, data disappears. I should refresh the page to get it back.
error is:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "tableData"
found in
---> <LocCountry>
<VContent>
<VApp>
<Root>
list page:
{% extends 'locations/index.html' %} {% load static%} {% block content %}
<loc-country></loc-country>
{% endblock %}{% block extrascript %}
<script>
Vue.component("loc-country", {
props: ["tableData"],
template: `
<v-data-table
:headers="headers"
:items="tableData"
class="elevation-1"></v-data-table>
`,
data() {
return {
// tableData: null,
loading: true,
errored: false,
headers: [
{ text: "Country", value: "name" },
{ text: "ISO-2", value: "iso2" }
]
};
},
created() {
axios
.get("/api/country/")
.then(res => (this.tableData = res.data.results))
.catch(error => {
console.log(error);
this.errored = true;
})
.finally(() => (this.loading = false));
}
});
</script>
{% endblock %}
and you can find the repo of the project here with data included if you loaddata: https://github.com/pydatageek/locations