Vue中的Vue“未定义项目”
[英]Vue “item is not defined” in a “v-for”
问题描述
我正在尝试使用v-for渲染每个项目，但是我得到了：
vue.js:616 [Vue warn]: Error in render: "ReferenceError: item is not defined"
found in
---> <Welcome>
<Main>
<Root>
我试图注释一些这样的代码：
<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>
但是错误仍然存在。 看来问题不是由getProgressBarStyle引起的，而是由<div v-if="item.point>10"或上面的代码引起的，因为它们指出了引用item位置。
所以我评论了这些：
<!--<<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>-->
现在错误消失了，但是为什么呢？ 我评论了这些应该无关的html代码。
我在这里用所有必需的代码重现了这个问题（请按F12键查看错误）
预习：
<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
问题是你正试图引用item方法内getProgressBarStyle()但你命名参数此方法为todo 。 您只需将todo更新为item 。 另外，我会考虑返回:style分配的对象而不是字符串。 另外，当您尝试使用item属性（例如point ，可能需要在模板中将item而不是index传递给此方法。
HTML：
<div class="determinate blue darken-1" :style="getProgressBarStyle(item)"></div>
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 + '%' };
}
}
})
这是一个工作示例 。
希望有帮助！
解决方案2
0 2019-01-11 15:16:41
看你的Vue的组件代码，您似乎对你的一些错误getProgressBarStyle方法，其中你给一个todo参数，但引用item会抛出这个错误。 我也使用了您在以下代码段中提供的模板代码
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>
Vue v-for 循环“项目”未定义
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.