Menu
This is my vue instance:
var vue = new Vue({
el: '#vue-wrapper',
data: {
items: [],
}})
This is a v-for loop in my index.html.eex
<div v-for="item in items[0].subItems">{{item.name}}</div>
This is the script where I populate items, on document ready, with data passed during rendering from my Phoenix server.
<script type="text/javascript">
jQuery(document).ready(function() {
//Assign server-side parameters
vue.items = <%= raw(@items) %>;
console.log(vue.items);
});
</script>
The log function shows the proper list of items that i want. Problem is that I can't access them in the v-for loop, I'm getting:
vue.min.js:6 TypeError: Cannot read property 'subItems' of undefined
I can't access the first element, like items are still not populated. How can I achieve this? I'm forced to initialize it in the index.html.eex file because I need the eex syntax to retrieve data passed from the server.
591
The “cannot read property of undefined” error occurs when you attempt to access a property or method of a variable that is undefined . You can fix it by adding an undefined check on the variable before accessing it.
There are four main types of errors you're likely to encounter in your Vue. js app: Syntax errors occur when you use the wrong syntax. Runtime errors are caused by illegal operations during execution.
Open the file in your code editor. Create the component's template section by adding <template></template> to the top of the file. Create a <script></script> section below your template section. Inside the <script> tags, add a default exported object export default {} , which is your component object.
var vue = new Vue({
el: '#vue-wrapper',
data: {
items: [{ subitems: []}],
})
Subitems was not defined in your example. This should fix it.
188
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
