Nesta aula iremos aprender como fazer um alteração e exclusão de dados em uma API .Net Core utilizando o framework de front-end Vue.js
Na aula de hoje iremos aprender como fazer um alteração e exclusão de dados em uma API .Net Core utilizando o framework de front-end Vue.js.
Vamos inserir dois componentes do tipo button : um para editar e outro para excluir dados.
< table >
< thead>
< tr>
< th >Id< /th>
< th >Nome< /th>
< th >Telefone< /th>
< th >Endereço>< /th>
< /tr>
< /thead>
< tbody>
< tr v-for="cliente" in clientes v-bind:key="cliente.id">
< td >{{cliente.id}}< /td>
< td >{{cliente.nome}}< /td>
< td >{{cliente.telefone}}< /td>
< td >{{cliente.endereco}}< /td>
< td >
< button class="btn btn-primary"> Editar < /button>
< /td>
< td >
< button class="btn btn-danger"> Excluir < /button>
< /td>
< /tr>
< /tbody>
< /table>
Vamos criar o método chamado excluir(), utilizando o método delete:
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()
}),
excluir(id)=> {
if(confirm("Confirm a exclusão?")){
axios.delete(`https://localhost:5001/clientes/${id}`.then(() => {
this.lista()
})
}
},
created() {
this.lista()
}
}
Precisamos fazer a chamada do método no botão Excluir
v-on:click="excluir(cliente.id)
< table >
< thead>
< tr>
< th >Id< /th>
< th >Nome< /th>
< th >Telefone< /th>
< th >Endereço>< /th>
< /tr>
< /thead>
< tbody>
< tr v-for="cliente" in clientes v-bind:key="cliente.id">
< td >{{cliente.id}}< /td>
< td >{{cliente.nome}}< /td>
< td >{{cliente.telefone}}< /td>
< td >{{cliente.endereco}}< /td>
< td >
< button class="btn btn-primary" v-on:click="editar(cliente)"> Editar < /button>
< /td>
< td >
< button class="btn btn-danger" v-on:click="excluir(cliente.id)"> Excluir < /button>
< /td>
< /tr>
< /tbody>
< /table>
Vamos criar a função para Editar() os dados e mostrá-los na tela para serem alterados. Criaremos também um objeto chamado cliente em memória que vamos gerenciar o estado, porque se ele estiver preenchido vamos simplesmente fazer a operação, senão deixaremos vazio.
cliente: undefined
import axios from 'axios'
export default{
name: 'Clientes',
props: {
msg:String
},
data: () => {
return {
clientes: [],
cliente: undefined,
mensagem:""
}
},
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()
}),
editar(cliente) {
document.getElementById("nome").value = cliente.nome,
document.getElementById("telefone").value = cliente.telefone,
document.getElementById("endereco").value = cliente.endereco
this.cliente = cliente
},
created() {
this.lista()
}
}
Vamos criar a função para alterar() para alterar os dados que envia diretamente para o POST. Iremos utilizar o cliente que foi criado em memória para poder atualizá-lo. Vamos pegar os dados na tela e devolver novamente para o objeto cliente.
import axios from 'axios'
export default{
name: 'Clientes',
props: {
msg:String
},
data: () => {
return {
clientes: [],
cliente: undefined,
mensagem:""
}
},
methods:{
lista() => {
axios.get(`https://localhost:5001/clientes`).then((res) => ){
this.clientes = res.data
})
},
salvar()=> {
if(this.cliente){
this.alterar()
return
}
axios.post(`https://localhost:5001/clientes`,
{
nome: document.getElementById("nome").value,
telefone: document.getElementById("telefone").value,
endereco: document.getElementById("endereco").value
}).then(() => {
this.lista()
}),
editar(cliente) {
document.getElementById("nome").value = cliente.nome,
document.getElementById("telefone").value = cliente.telefone,
document.getElementById("endereco").value = cliente.endereco
this.cliente = cliente
},
alterar() {
this.cliente.nome = document.getElementById("nome").value
this.cliente.telefone = document.getElementById("telefone").value
this.cliente.endereco = document.getElementById("endereco").value
axios.put(`https://localhost:5001/clientes/${this.cliente.id}`,this.cliente).then(() => ){
this.lista()
this.cliente = undefined
document.getElementById("nome").value = ""
document.getElementById("telefone").value = ""
document.getElementById("endereco").value = ""
})
},
created() {
this.lista()
}
}
Nesta aula iremos aprender como fazer um alteração e exclusão de dados em uma API .Net Core utilizando o framework de front-end Vue.js
Na aula de hoje iremos aprender como fazer um alteração e exclusão de dados em uma API .Net Core utilizando o framework de front-end Vue.js.
Vamos inserir dois componentes do tipo button : um para editar e outro para excluir dados.
< table >
< thead>
< tr>
< th >Id< /th>
< th >Nome< /th>
< th >Telefone< /th>
< th >Endereço>< /th>
< /tr>
< /thead>
< tbody>
< tr v-for="cliente" in clientes v-bind:key="cliente.id">
< td >{{cliente.id}}< /td>
< td >{{cliente.nome}}< /td>
< td >{{cliente.telefone}}< /td>
< td >{{cliente.endereco}}< /td>
< td >
< button class="btn btn-primary"> Editar < /button>
< /td>
< td >
< button class="btn btn-danger"> Excluir < /button>
< /td>
< /tr>
< /tbody>
< /table>
Vamos criar o método chamado excluir(), utilizando o método delete:
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()
}),
excluir(id)=> {
if(confirm("Confirm a exclusão?")){
axios.delete(`https://localhost:5001/clientes/${id}`.then(() => {
this.lista()
})
}
},
created() {
this.lista()
}
}
Precisamos fazer a chamada do método no botão Excluir
v-on:click="excluir(cliente.id)
< table >
< thead>
< tr>
< th >Id< /th>
< th >Nome< /th>
< th >Telefone< /th>
< th >Endereço>< /th>
< /tr>
< /thead>
< tbody>
< tr v-for="cliente" in clientes v-bind:key="cliente.id">
< td >{{cliente.id}}< /td>
< td >{{cliente.nome}}< /td>
< td >{{cliente.telefone}}< /td>
< td >{{cliente.endereco}}< /td>
< td >
< button class="btn btn-primary" v-on:click="editar(cliente)"> Editar < /button>
< /td>
< td >
< button class="btn btn-danger" v-on:click="excluir(cliente.id)"> Excluir < /button>
< /td>
< /tr>
< /tbody>
< /table>
Vamos criar a função para Editar() os dados e mostrá-los na tela para serem alterados. Criaremos também um objeto chamado cliente em memória que vamos gerenciar o estado, porque se ele estiver preenchido vamos simplesmente fazer a operação, senão deixaremos vazio.
cliente: undefined
import axios from 'axios'
export default{
name: 'Clientes',
props: {
msg:String
},
data: () => {
return {
clientes: [],
cliente: undefined,
mensagem:""
}
},
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()
}),
editar(cliente) {
document.getElementById("nome").value = cliente.nome,
document.getElementById("telefone").value = cliente.telefone,
document.getElementById("endereco").value = cliente.endereco
this.cliente = cliente
},
created() {
this.lista()
}
}
Vamos criar a função para alterar() para alterar os dados que envia diretamente para o POST. Iremos utilizar o cliente que foi criado em memória para poder atualizá-lo. Vamos pegar os dados na tela e devolver novamente para o objeto cliente.
import axios from 'axios'
export default{
name: 'Clientes',
props: {
msg:String
},
data: () => {
return {
clientes: [],
cliente: undefined,
mensagem:""
}
},
methods:{
lista() => {
axios.get(`https://localhost:5001/clientes`).then((res) => ){
this.clientes = res.data
})
},
salvar()=> {
if(this.cliente){
this.alterar()
return
}
axios.post(`https://localhost:5001/clientes`,
{
nome: document.getElementById("nome").value,
telefone: document.getElementById("telefone").value,
endereco: document.getElementById("endereco").value
}).then(() => {
this.lista()
}),
editar(cliente) {
document.getElementById("nome").value = cliente.nome,
document.getElementById("telefone").value = cliente.telefone,
document.getElementById("endereco").value = cliente.endereco
this.cliente = cliente
},
alterar() {
this.cliente.nome = document.getElementById("nome").value
this.cliente.telefone = document.getElementById("telefone").value
this.cliente.endereco = document.getElementById("endereco").value
axios.put(`https://localhost:5001/clientes/${this.cliente.id}`,this.cliente).then(() => ){
this.lista()
this.cliente = undefined
document.getElementById("nome").value = ""
document.getElementById("telefone").value = ""
document.getElementById("endereco").value = ""
})
},
created() {
this.lista()
}
}