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>

问题是您尝试在方法 getProgressBarStyle() 中引用item，但您将此方法的参数命名为 todo 。您只需要将todo更新为 item .此外，我会考虑为:style赋值返回一个对象而不是字符串。此外，您可能需要在模板中传递item而不是index此方法，因为您尝试在item上使用属性，例如point：

.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 + '%' };
    }
  }
})

这是一个工作示例。

希望对您有所帮助！

查看您的 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>

相关内容

最新更新

热门标签：