Vue "элемент не определен" в "v-for" - PullRequest
Новая
       1

Vue "элемент не определен" в "v-for"

0 голосов
/ 11 января 2019

Я пытаюсь использовать 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 ]

0 голосов
/ 11 января 2019

Глядя на свой код компонента 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>
0 голосов
/ 11 января 2019

Проблема в том, что вы пытаетесь сослаться на 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 + '%' };
    }
  }
})

Вот рабочий пример .

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...