无法在VueJs中使用V-for渲染列表

debugcn 发表于 Dev

阿奇·卡里基（Archie Kariuki）

我在Vue中是个新手，我正在尝试遍历数组。不完全知道我在做什么错，但列表未显示在HTML上。下面是下面的代码：这是一个通过路由器视图呈现的索引文件。

<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>

这是路由器视图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
    }
  ]
})

这是app.vue

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

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

任何帮助将不胜感激。

我给了

你有错字 <li v-for="(score,index) in tournamnet.scores" :key="index"></li>

比赛错误

如果您在控制台中查看，应该会看到

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。