[英]Cannot read property of 'Undefined' in vue.js
This is my vue instance: 这是我的vue实例:
var vue = new Vue({
el: '#vue-wrapper',
data: {
items: [],
}})
This is a v-for loop in my index.html.eex 这是我的index.html.eex中的v-for循环
<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. 这是我在文档就绪时填充项目的脚本,在我的Phoenix服务器渲染过程中传递数据。
<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:
问题是我无法在v-for循环中访问它们,我得到:
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.
我被迫在index.html.eex文件中初始化它,因为我需要eex语法来检索从服务器传递的数据。
var vue = new Vue({
el: '#vue-wrapper',
data: {
items: [{ subitems: []}],
})
Subitems was not defined in your example. 您的示例中未定义子项。 This should fix it.
这应该解决它。
try to wrap your v-for into v-if="flag" 尝试将你的v-for包装成v-if =“flag”
define your flag in instance as false 将实例中的标志定义为false
once your data comes from backend change the flag... 一旦你的数据来自后端改变标志......
尝试这个:
<div v-if="items.length > 0" v-for="item in items[0].subItems">{{item.name}}</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.