<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>