Vue.js + dotNet Core (POST) Cadastrando clientes

Nesta aula iremos aprender como cadastrar um novo cliente em nossa API feita com dotNet Core e com o framework de front-end Vue.js

Assine nossa Comunidade

API .Net Core - Vue.js - Cadastrando Clientes.

O objetivo da aula de hoje é fazer a inclusão de dados em Vue.js.

Criaremos um formulário para cadastrar as informações do cliente:

      
          < form >
            < div class="form-group">
              < label for "nome"> Nome: < /label>
              < input type="hidden" id="id" name="id" >
              < input type="text" class="form-control" id="nome" name="nome" placeholder="Digite o nome" >
            < /div >
            < div class="form-group">
              < label for "telefone"> Telefone: < /label>
              < input type="tel" class="form-control" id="telefone" name="telefone" placeholder="Digite o telefone">
            < /div >
            < div class="form-group">
              < label for "endereco"> Endereço: < /label>
              < input type="text" class="form-control" id="endereco" name="endereco" placeholder="Digite o endereço">
            < /div >
            < button v-on:click="salvar()" type="button" class="btn btn-default"> Enviar < /button>
            < div style="color:red" >
              {{ mensagem }}
            < /div>
          < /form>

Vamos criar o método salvar():

      
           
        import axios from 'axios'
        
        export default{
         name: 'Clientes',
         props: {
          msg:String
         },
         data: () => {
          return {
            clientes: [],
          }
         },
         methods:{
          lista() => {
            axios.get(`https://localhost:5001/clientes`).then((res) => ){
              this.clientes = res.data
            })
          },
          salvar()=> {
            axios.post(`https://localhost:5001/clientes`,
            {
              nome: document.getElementById("nome").value,
              telefone: document.getElementById("telefone").value,
              endereco: document.getElementById("endereco").value
            }).then(() => {
              this.lista()
            })
         },
         created() {
          this.lista()
         }
        }