javascript - Vue "item is not defined" in a "v-for"

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams <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 v-else class="progress blue lighten-3" style="flex-grow: 1;height: 16px;">

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.

So I commented these:

And now the errors disappear, but why? I commented these html codes which are supposed to be not related.

I've reproducted this problem with all required code here (Press F12 to see the errors, please)

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 v-else class="progress blue lighten-3" style="flex-grow: 1;height: 16px;"> <div class="determinate blue darken-1" :style="getProgressBarStyle(item.point)"></div>

The problem is you are attempting to reference item inside method getProgressBarStyle() , but you name the parameter to this method as todo . You just need to update todo to item . Also I'd consider returning an object for the :style assignment instead of a string. 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 :

HTML:

<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 + '%' };
Here is a working example.
Hopefully that helps!
                Thank you for your answer. I'm sorry to make some errors when moving my code to jsfiddle. Now I modified it to make it consistent with my project code. (index=>item.point, todo=>point). And the error remains. I guess it's beacause I passed item.point to getProgressBarStyle instead of item.
– Pluveto
                Jan 11, 2019 at 15:30
                No problem, glad to help. Yeah, you'll need to no matter what pass something other than index to this method, but it would be up to you how you want to handle getting point to the method to calculate styles. Please mark the answer if it help resolve your issue. Happy coding!
– Alexander Staroselsky
                Jan 11, 2019 at 15:32
    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">
    <h3>Rank</h3>
    <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 class="determinate  blue darken-1" :style="getProgressBarStyle(item.point)"></div>
    </body>
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.