example-code/javascript-vue/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">
		<li v-if="service.available"><span>{{service.name}}</span><span>{{(service.price/100).toLocaleString('en')}}</span><span>{{service.minimum.toLocaleString('en')}}</span><span>{{service.maximum.toLocaleString('en')}}</span>
<svg @click="$emit('select', service)" 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() {
	if (!this.services || !this.site) {return}

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

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