0

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app-gridview">

  <div>
    <button class="button" v-on:click="switchView()"><span>{{ buttonSwitchViewText }}</span></button>
    <button class="button" v-on:click="switchData()"><span>{{ buttonSwitchDataText }}</span></button>
  </div>

  <div v-bind:class="[ isGridView ? 'grid-wrapper' : 'list-wrapper' ]">

    <div class="grid-row" v-if="isGridView">
      <div class="grid-header" v-for="name in gridData.columns">{{ name }}</div>
    </div>

    <!-- GridView structure -->
    <div v-if="isGridView" class="grid-row" v-for="row in gridData.data">
      <div class="list-row-item" v-for="name in gridData.columns">
        <div>{{ row[name] }}</div>
      </div>
    </div>

    <!-- ListView structure -->
    <div v-if="!isGridView" class="list-row" v-for="row in gridData.data">
      <img v-bind:src="row.ImagePath" class="list-image" />
      <div class="list-property">
        <div class="list-row-item" v-for="name in gridData.columns">
          <div class="list-property-name">{{ name }}</div>
          <div>{{ row[name] }}</div>
        </div>
      </div>
    </div>

  </div>

</div>

Getting error as

error Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key

How can I solve this issue, With some reference, I come to know we need to pass v-bind-key for the value, But not sure how to pass it.

Not A Bot
  • 2,474
  • 2
  • 16
  • 33
T dhanunjay
  • 790
  • 1
  • 13
  • 46
  • Does this answer your question? [Getting Error "Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key" in index.vue](https://stackoverflow.com/questions/54228356/getting-error-elements-in-iteration-expect-to-have-v-bindkey-directives-vue) – Michal Levý May 06 '21 at 08:43

2 Answers2

1

Whenever we are using v-for in vuejs, we need to pass a unique value which is key which helps in properly rendering the components whenever the loop runs.

You can pass it like <div class="list-row-item" v-for="(name, index) in gridData.columns" :key="index">

The value of the key needs to be unique.

Yash Maheshwari
  • 1,842
  • 2
  • 7
  • 16
0

You should use uniq index inside your loop. Look hear https://v2.vuejs.org/v2/guide/list.html

<div v-if="!isGridView" class="list-row" v-for="(row, index) in gridData.data" :key="index">
tony19
  • 125,647
  • 18
  • 229
  • 307
AntonK19
  • 106
  • 3