Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

<template>
  <form @submit.prevent="submitPost">
    <input v-model="form.title"   placeholder="Title"   required />
    <textarea v-model="form.body" placeholder="Body"    required></textarea>
    <p v-if="formError" class="error">{{ formError }}</p>
    <button type="submit" :disabled="isSubmitting">
      {{ isSubmitting ? 'Saving…' : 'Save Post' }}
    </button>
  </form>

<button @click="deletePost(selectedId)" :disabled="isDeleting">
    {{ isDeleting ? 'Deleting…' : 'Delete' }}
  </button>
</template>

const router      = useRouter();
const isSubmitting = ref(false);
const isDeleting   = ref(false);
const formError    = ref(null);
const selectedId   = ref(1);

const form = ref({ title: '', body: '' });

async function submitPost() {
  isSubmitting.value = true;
  formError.value    = null;
  try {
    const { data } = await api.post('/posts', { ...form.value, userId: 1 });
    router.push({ name: 'post-detail', params: { id: data.id } });
  } catch (e) {
    formError.value = e.response?.data?.message ?? e.message;
  } finally {
    isSubmitting.value = false;
  }
}

async function deletePost(id) {
  if (!confirm('Delete this post?')) return;
  isDeleting.value = true;
  try {
    await api.delete(`/posts/${id}`);
    router.push({ name: 'posts' });
  } finally {
    isDeleting.value = false;
  }
}
</script>