repod/src/components/Discover/TopItem.vue

<template>
	<a @click="addSubscription">
		<img :alt="`${title} - ${author}`"
			:src="imageUrl"
			:title="author">
	</a>
</template>

<script>
import axios from '@nextcloud/axios'
import { generateUrl } from '@nextcloud/router'
import { showError } from '@nextcloud/dialogs'

export default {
	name: 'TopItem',
	components: {},
	props: {
		author: {
			type: String,
			required: true,
		},
		imageUrl: {
			type: String,
			required: true,
		},
		link: {
			type: String,
			required: true,
		},
		title: {
			type: String,
			required: true,
		},
	},
	methods: {
		async addSubscription() {
			try {
				await axios.post(generateUrl('/apps/gpoddersync/subscription_change/create'), { add: [this.link], remove: [] })
			} catch (e) {
				console.error(e)
				showError(t('Error while adding the feed'))
			}

			this.$store.dispatch('subscriptions/fetch')
		},
	},
}
</script>

<style scoped>
	img {
		height: 100%;
		width: 100%;
	}
</style>