Currently, I am utilizing Django as a backend and attempting to pass some data into a Vue table component that I have created. I followed this informative tutorial to set it up. The Vue component displays correctly when using webpack. My approach involves setting the data to a JavaScript constant and then passing it into the component. However, the data does not seem to be flowing through as expected. Below is the structure of my scripts:
index.html
{% block content %}
<script>
const gridData = {{json_data|safe}};
console.log(gridData)
</script>
<div id="app">
<table_component
v-bind:tableData=this.gridData
>
</table_component>
</div>
{% end block %}
myComponent.vue script section
export default {
name: 'table_component',
props: {
tableData: Array
},
data() {
return {
}
},
components: {
Grid,
ButtonModal
},
created(){
console.log(this.tableData)
},
}
Upon checking the console, no data appears. It simply displays undefined.
view.py
class CurrentClassroomView(LoginRequiredMixin, CreateView):
template_name = 'home/index.html'
def get(self, request, *args, **kwargs):
db_data = list(myData.objects.all().values())
my_json_data = json.dumps(db_data)
return render(request, self.template_name, {'json_data':my_json_data})
I encountered an error in the console regarding prop naming conventions which caused confusion since I passed the props with uppercase letters but they appeared in lowercase. Any assistance on resolving this issue would be highly appreciated. Thank you!