example-code/javascript-vue/js/panel/support.vue

<template>
<div class="support-section" id="main">

<h2>Support</h2>

<loading v-if="loading"></loading>

<div v-if="!loading && complete" class="dialog">
	<img class="icon" src="../../images/checked2.svg" alt="">
	<h3>Ticket sent. An administrator will contact you soon.</h3>
</div>

<div v-if="!loading && !complete" id="support-form">

<label for="">Topic</label>
<select id="support-topic" name="" v-model="topic">
	<option value="order">Order</option>
	<option value="service">Service</option>
	<option value="credits">Credits</option>
	<option value="payment">Payment</option>
	<option value="other">Other</option>
</select>

<label for="">Details</label>
<textarea id="" name="" cols="30" rows="10" v-model="message"></textarea>
<span class="note-grey">Include any relevant information like the order number,
service name, etc</span>

<button @click="send">Submit</button>

<p class="error-message">{{errorMessage}}</p>

</div>

</div>
</template>


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

function send() {
	this.errorMessage = ''

	if (!this.topic || !this.message) {
		this.errorMessage = 'Topic and details cannot be blank.'
		return
	}

	this.loading = true

	fetch("/panel/support", {
		method: 'POST',
		headers: {'Content-Type': 'application/json',
			'Accept': 'application/json',
		'X-XSRF-TOKEN': this.token},
		body: JSON.stringify({'topic': this.topic, 'message': this.message})}).
		then(response => {
			if (response.ok) {
				this.complete = true
			} else {
				this.complete = false
				this.error = true
				this.errorMessage = `${response.status}:
				${response.statusText}`
			}

			this.loading = false
		})

}

export default {
	components: {Loading},
	props: ['user', 'token'],
	data() {
		return {loading: false, complete: false, error: false, errorMessage:
		'', topic: null, message: ''}
	}, 
	methods: {send}
}
</script>