Vue中的Vue“未定义项目”
[英]Vue “item is not defined” in a “v-for”
问题描述
I'm trying to use v-for to render for each item, but I got this: 
我正在尝试使用v-for渲染每个项目，但是我得到了：
vue.js:616 [Vue warn]: Error in render: "ReferenceError: item is not defined"
found in
---> <Welcome>
<Main>
<Root>
I tried to comment some codes like this: 我试图注释一些这样的代码：
<div style="padding-top: 20px" v-for="(item,index) in weekRank" v-bind:key="index">
<b>{{item.username}} </b> {{item.point}} / 10
<div v-if="item.point>10" class="progress deep-purple lighten-3" style="flex-grow: 1;height: 16px;">
<!--<div class="determinate deep-purple darken-1" :style="getProgressBarStyle(item.point)"></div>-->
</div>
<div v-else class="progress blue lighten-3" style="flex-grow: 1;height: 16px;">
<!--<div class="determinate blue darken-1" :style="getProgressBarStyle(item.point)"></div>-->
</div>
</div>
But the errors are still there. 但是错误仍然存在。 It seems the problem is not caused by getProgressBarStyle but by <div v-if="item.point>10" or codes above it, because they point where item was referred. 看来问题不是由getProgressBarStyle引起的，而是由<div v-if="item.point>10"或上面的代码引起的，因为它们指出了引用item位置。
So I commented these: 所以我评论了这些：
<!--<<div v-else class="progress blue lighten-3" style="flex-grow: 1;height: 16px;">
<div class="determinate blue darken-1" :style="getProgressBarStyle(item.point)"></div>
</div>-->
And now the errors disappear, but why? 现在错误消失了，但是为什么呢？ I commented these html codes which are supposed to be not related. 我评论了这些应该无关的html代码。
I've reproducted this problem with all required code here (Press F12 to see the errors, please) 我在这里用所有必需的代码重现了这个问题（请按F12键查看错误）
Preview: 预习：
<div style="padding-top: 20px" v-for="(item,index) in weekRank" v-bind:key="index">
<b>{{item.username}} </b> {{item.point}} / 10
<div v-if="item.point>10" class="progress deep-purple lighten-3" style="flex-grow: 1;height: 16px;">
<div class="determinate deep-purple darken-1" :style="getProgressBarStyle(item.point)"></div>
</div>
<div v-else class="progress blue lighten-3" style="flex-grow: 1;height: 16px;">
<div class="determinate blue darken-1" :style="getProgressBarStyle(item.point)"></div>
</div>
</div>
2 个解决方案
解决方案1
0 已采纳 2019-01-11 15:13:38
The problem is you are attempting to reference item inside method getProgressBarStyle() , but you name the parameter to this method as todo . 问题是你正试图引用item方法内getProgressBarStyle()但你命名参数此方法为todo 。 You just need to update todo to item . 您只需将todo更新为item 。 Also I'd consider returning an object for the :style assignment instead of a string. 另外，我会考虑返回:style分配的对象而不是字符串。 Also you need to probably pass item instead of index to this method in the template as you are attempting to use properties on item such as point : 另外，当您尝试使用item属性（例如point ，可能需要在模板中将item而不是index传递给此方法。
HTML: HTML：
<div class="determinate blue darken-1" :style="getProgressBarStyle(item)"></div>
JS JS
new Vue({
el: "#app",
data: {
weekRank: [
{ index: 0, username: "Learn JavaScript", point: 9 },
{ index: 1, username: "Learn Vue", point: 7 },
{ index: 2, username: "Play around in JSFiddle", point: 5 },
{ index: 3, username: "Build something awesome", point: 1 }
]
},
methods: {
getProgressBarStyle: function(item) { // change this to 'item'
if (item.point >= 10) return { 'width': 100%' };
return { 'width': item.point * 10 + '%' };
}
}
})
Here is a working example . 这是一个工作示例 。
Hopefully that helps! 希望有帮助！
解决方案2
0 2019-01-11 15:16:41
Looking at your Vue component code, you seem to have some errors on your getProgressBarStyle method where you're giving a todo parameter but are referencing item which throws that error. 看你的Vue的组件代码，您似乎对你的一些错误getProgressBarStyle方法，其中你给一个todo参数，但引用item会抛出这个错误。 I've used the template code you've provided in the snippet below as well 我也使用了您在以下代码段中提供的模板代码
new Vue({ el: "#app", data: { weekRank: [ { index: 0, username: "Learn JavaScript", point: 9 }, { index: 1, username: "Learn Vue", point: 7 }, { index: 2, username: "Play around in JSFiddle", point: 5 }, { index: 3, username: "Build something awesome", point: 1 } ] }, methods: { getProgressBarStyle: function(point){ if (point >= 10) return 'width: 100%'; return 'width: ' + point * 10 + '%' } } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div> <h3>Rank</h3> <body> <div class="" style="display: flex;"> <div style="min-width: 300px;flex-grow: 1;"> <h6><b>details: </b></h6> <div style="padding-top: 20px" v-for="(item,index) in weekRank" v-bind:key="index"> <b>{{item.username}} </b> {{item.point}} / 10 <div v-if="item.point>10" class="progress deep-purple lighten-3" style="flex-grow: 1;height: 16px;"> <div class="determinate deep-purple darken-1" :style="getProgressBarStyle(item.point)"></div> </div> <div class="determinate blue darken-1" :style="getProgressBarStyle(item.point)"></div> </div> </div> </div> </div> </body> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.