traxxx/assets/components/stashes/add.vue

<template>
	<Dialog
		title="Add stash"
		@close="$emit('close', false)"
	>
		<form
			class="dialog-body"
			@submit.prevent="addStash"
		>
			<div
				v-if="errorMsg"
				class="form-error"
			>{{ errorMsg }}</div>

			<input
				ref="name"
				v-model="name"
				type="input"
				placeholder="Name"
				class="input"
			>

			<div class="dialog-actions right">
				<button
					type="submit"
					class="button button-primary"
				>Add</button>
			</div>
		</form>
	</Dialog>
</template>

<script>
async function addStash() {
	this.errorMsg = null;

	try {
		await this.$store.dispatch('createStash', {
			name: this.name,
		});

		this.$emit('close', true);
	} catch (error) {
		this.errorMsg = error.message;
	}
}

function mounted() {
	this.$refs.name.focus();
}

export default {
	emits: ['close'],
	data() {
		return {
			errorMsg: null,
			name: null,
		};
	},
	mounted,
	methods: {
		addStash,
	},
};
</script>

<style lang="scss" scoped>
.input {
	width: 100%;
}
</style>