example-code/javascript-vue/js/panel/order-item.vue

<template>
<div id="overlay" v-if="selected">

	<img @click="$emit('close')" class="cancel icon"
	src="../../images/cancel-icon2.svg" alt=""/>
	<div class="overlay-item">
		<img v-if="selected.service.site == 'youtube'" class="icon"
		src="../../images/youtube-icon.svg" alt=""/>
		<img v-if="selected.service.site == 'instagram'" class="icon"
		src="../../images/instagram-icon.svg" alt=""/>
		<img v-if="selected.service.site == 'twitter'" class="icon"
		src="../../images/twitter.svg" alt=""/>
		<img v-if="selected.service.site == 'tiktok'" class="icon"
		src="../../images/tik-tok.svg" alt=""/>
		<h3>{{selected.service.name}}</h3>

	<div class="details">
		<ul>
			<li><b>Status:</b> <span>{{selected.status.charAt(0).toUpperCase() +
			selected.status.slice(1)}}</span></li>
			<li><b>Quantity:</b> <span>{{selected.quantity}}</span></li>
			<li><b>Remaining:</b> <span>{{selected.remaining}}</span></li>
			<li><b>URL:</b> <span>{{selected.url}}</span></li>
		</ul>
	</div>

	<div v-if="selected.status == 'processing' || selected.status ==
	'error'" class="change-url">
		<h4>URL</h4>
		<div><input v-model="url" type="url" id="url"></div> 
		<button @click="saveURL" :disabled="loading">Save
		<loading-icon v-if="loading"></loading-icon></button>
		<p id="overlay-error">{{errorMessage}}</p>
	</div>

	</div>

	</div>
</template>

<script>
import LoadingIcon from '../icons/loading.vue'

function saveURL() {
	fetch('/panel/save-url', {
		method: 'POST',
		headers: {'Content-Type': 'application/json',
			'Accept': 'application/json',
		'X-XSRF-TOKEN': this.token},
		body: JSON.stringify({'url': this.url, 'order': this.selected.id})
		}).then(response => {
			if (response.ok) {
				this.errorMessage = 'Saved'
				this.$emit('changeUrl', this.url)
			} else {
				this.errorMessage = 'An error occured'
			}
		})

}

export default {
	data() {
		return {loading: false, errorMessage: '', url: this.selected.url}
	},
	components: {LoadingIcon},
	methods: {saveURL},
	props: ['selected', 'token'],
	emits: ['changeUrl', 'close']
}
</script>