45 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			45 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|     <div class="border-b">
 | |
|         <div>
 | |
|             <h2 class="text-gray-800 text-3xl text-center mt-3 mb-2 MvAamu"
 | |
|                 style="font-weight: 100;" 
 | |
|                     >
 | |
|                ތަފާތު މައުޟޫޢުތައް
 | |
|             </h2>
 | |
|         </div>
 | |
| 
 | |
|         <div class="flex flex-wrap justify-center">
 | |
|             <a
 | |
|                 :href="'/topic/' + topic.slug"
 | |
|                 v-for="topic in topics"
 | |
|                 :key="topic.id"
 | |
|                 class="text-sm font-medium border border-gray-700 py-1 px-3 rounded-full mr-2 mt-2 mb-4 hover:bg-green-100 MvTyper"
 | |
|                 style="color:#4A5568;"
 | |
|                 v-text="topic.name"
 | |
|             ></a>
 | |
|         </div>
 | |
|     </div>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| export default {
 | |
|     name: "discover-topics",
 | |
|     data() {
 | |
|         return {
 | |
|             topics: []
 | |
|         };
 | |
|     },
 | |
| 
 | |
|     mounted() {
 | |
|         axios
 | |
|             .get("api/topics")
 | |
|             .then(response => {
 | |
|                 this.topics = response.data.data;
 | |
|             })
 | |
|             .catch(error => {
 | |
|                 console.log(error);
 | |
|             });
 | |
|     }
 | |
| };
 | |
| </script>
 |