Question

我正在尝试使用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>

Answer 1

问题是您试图在方法item中引用getProgressBarStyle()，但是您将此方法的参数命名为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 + '%' };
    }
  }
})

这里是工作中的example。

希望有帮助！

Answer 2

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

在“ v-for”中的Vue“未定义项目”

2 个答案: