Here is my Vue instance setup:
const vueApp = new Vue({
el: '#vue-wrapper',
data: {
items: []
}});
Utilizing a v-for loop in index.html.eex:
<div v-for="item in items[0].subItems">{{ item.name }}</div>
In this script, I populate the 'items' array with server-side data on document ready, passed from my Phoenix server during rendering:
<script type="text/javascript">
jQuery(document).ready(function() {
//Assigning server-side data
vueApp.items = <%= raw(@items) %>;
console.log(vueApp.items);
});
</script>
The log function confirms the correct list of items. However, I encounter an error when trying to access them in the v-for loop:
vue.min.js:6 TypeError: Cannot read property 'subItems' of undefined
I seem unable to access the first element as if the 'items' array is not yet populated. How can I resolve this issue? The initialization in the index.html.eex file is necessary for retrieving data from the server using EEx syntax.