Cannot render list using V-for in VueJs

user_10980759 0
Viewed 100

I am very new in Vue and I am trying to loop through an array. Don't exactly know what I am doing wrong but the list is not displaying on HTML. Here is the code below: This is an index file that is being rendered through a router view.

<template>
  <div class="index container">
    <div class="card" v-for="tournament in tournaments" :key="tournament.id">
      <div class="card-content">
        <h2 class="indigo-text">{{tournament.title}}</h2>
        <ul class="tournaments">
          <li v-for="(score,index) in tournamnet.scores" :key="index"></li>
          <span class="chip">{{score}}</span>
        </ul>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
     tournaments:[
       {title:'Muthaiga golf Tournament',slug: 'muthaiga-golf-tournament',scores:['Round 1', 'Round 2', 'Round 3'],id:'1'},
       {title:'Wilson Churchhill',slug: 'Wilson Churchhill',scores:['Round 1', 'Round 2', 'Round 3'],id:'2'},
       ]
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>

Here is the router view index.js

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index
    }
  ]
})

And here is the app.vue

<template>
  <div id="app">
   <navbar />
    <router-view/>
  </div>
</template>

<script>
import navbar from '@/components/navbar'
export default {
  name: 'App',
  components:{
    navbar
  }
}
</script>

Any help will be highly appreciated.

vue.js
2 Answers

Place your span inside the v-for

<ul class="tournaments">
  <li v-for="(score,index) in tournament.scores" :key="index+'tournament'">
    <span class="chip">{{score}}</span>
  </li>
</ul>

Also, it is better not to use the index as a key, I added string 'tournament' to make it more unique.

Additionally, please make sure you got the spelling corrected for 'tournament'.

Link to official docs.

user_61702330

You have a typo on <li v-for="(score,index) in tournamnet.scores" :key="index"></li>

Mispelled tournament

If you look in the console you should see

vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "score" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Index> at src/components/index.vue
       <App> at src/App.vue
         <Root>
user_47178260
Related