显示错误“未知自定义元素<卡>”

Question

每当我执行以下代码时，都会显示错误。请帮忙。我是Vue.js的初学者，所以我没有足够的Vue练习。我试图在不同的按钮点击上显示不同的卡。

<div v-for="item in cards">
  <cards  v-bind:if="cat==item.id" title="item.title" text="item.text" 
  src="item.src"></cards>
 </div> 
<script>
   new Vue({
   el: '#app',
   data() {
   return {
   cards:[
    {'id':'0','title': 'BASED ON YOUR READING HISTORY Learn these neat 
          JavaScript tricks in less than 5 minutes', 'text':'Some quick 
             example text to build on the card title and make up the bulk of 
               the card', 'src':'', 'age_group':'pregnancy'},
                ],
                cat:'0'
           }
            },
           })
           Vue.component('cards', {
          props: ['title','source','text'],
            template: '<div class="container-fluid" ><div class="card" 
          style="width:40%"><img style="float:right;" src={{source}} 
          alt="Card image cap"><div class="card-body"><h3 style="padding- 
        right:30%;">{{title}}</h5><p class="card-text" style="padding- 
         right:30%;">{{text}}</p><a href="#" class="btn btn-primary" 
            style="float:right;">Go somewhere</a></div></div></div>'
         })
         </script>