trendplays/resources/js/panel/service-pane.vue

<template>
<section class="services-pane youtube" >
	<h4>{{site.charAt(0).toUpperCase() + site.slice(1)}}</h4>
	<ul :key="service.id" v-for="service in filter(site)">
		<li><span>{{service.name}}</span><span>{{service.price}}</span><span>{{service.minimum}}</span><span>{{service.maximum}}</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-square-fill" viewBox="0 0 16 16">
  <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z"/>
</svg>
		</li>
	</ul>
	</section>
</template>

<script>
function filter(site) {
	if (!this.services) {return}

	return this.services.filter(function(s) {
		return s.site == site
	})
}

export default {
	props: ['services', 'site'],
	methods: {filter}
}
</script>