代码之家 › 专栏 › 技术社区 › Pluveto

在“v-for”中,vue“item is not defined”

vuejs2 javascript

Pluveto · 技术社区 · 7 年前

我想用 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 不相关的代码。

我用所有必需的代码复制了这个问题 here (请按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 回复 | 直到 7 年前

Alexander Staroselsky 7 年前

问题是您试图引用 item 内方法 getProgressBarStyle() ,但您将此方法的参数命名为 todo . 你只需要更新 托多 到 项目 . 我也会考虑返回一个对象 :style 赋值而不是字符串。你还需要通过而不是 index 如 point :

<div class="determinate  blue darken-1" :style="getProgressBarStyle(item)"></div>

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

example .

fixatd 7 年前

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