How to insert data into database with vuejs using axios
Today, we will learn how to insert data into database with vuejs using axios. first of we will setup our UI component like input and vue script. then you will use api link(which i already) in your vue axios get function.
Setup UI:
Create new file: 'addPost.vue' in resource/js folder.
addPost.vue:
write form with addPostFun submit prevent action.
<template>
<form class="add-new-post" v-on:submit.prevent="addPostfun"></form>
</template>
add Input for title:
we will use v-model name title for pass title value to script.
<input class="form-control form-control-lg mb-3" type="text" placeholder="Your Post Title" v-model="title">
add Input for content:
we will use v-model name content for pass content value to script.
you already know how we used vue-editor implement. in case you do not know how to use this text editor please check this post
<vue-editor v-model="content"></vue-editor>
add button for submit:
we write publish as value of our button, and button type will submit
<button type="submit">Publish</button>
Full code of our UI template:
<template>
<form class="add-new-post" v-on:submit.prevent="addPostfun">
<input type="text" v-model="title">
<vue-editor v-model="content"></vue-editor>
<button type="submit">Publish</button>
</form>
</template>
