Fórum Academy - Input checkbox no Vue.js 2

Criador Wesley Kovalski 25/08/2022

No vue.js 2 para trazer dados do banco para um formulário com vários input do type checkbox, como ficaria?

Estou fazendo assim:

<div

v-for="sessionPage in this.$store.state.sessionPages.items.data"

class="intro-x relative flex items-center mb-3"

>

<input

type="checkbox"

:value="sessionPage"

v-model="getSessionPageSelected"

class="input-permissions"

/>

</div>

computed: {

getSessionPageSelected: {

get() {

return this.$store.state.sessionPages.sessionPageSelected.data;

},

set(value) {

var dataValue = {

data: [],

};

dataValue.data = value;

this.$store.commit("LOAD_SELECTED_SESSION_PAGES", dataValue);

},

},

OBS: Eu reparei que só funciona se eu passar só o campo ID lá da class Resource que vem da API, se tiver o campo NAME ou qualquer outra não vem com o input checked.

10 comentários

Manager Carlos Ferreira 25/08/2022

Olá, Wesley!
Tudo bem?

O que a sua API retorna?
Como está usando o API Resource do Laravel, você pode limitar, para retornar apenas os dados que precisa.

Ou, no frontend, ao invés de pegar os dados do state, você pode pegar de um getter, assim você pode organizar os dados (usar apenas os valores que precisa);

Pegou a ideia amigo?

Criador Wesley Kovalski 25/08/2022

O que a sua API retorna?
R: está retornando uma lista do banco de dados de todos os perfis, exemplo:

Administrador, Financeiro, Vendedor

No front-end é assim:

Aparece a lista dos perfis, ao clicar em algum ítem dessa lista, abre um modal, nesse modal é exibido uma listagem de todas as páginas do sistema, ao ser carregado esse modal já tem que vir todas as páginas e também as páginas que já está vinculado a esse perfil clicado. Essas lista de páginas são inputs do type checkbox, então a lógica é para exibir inputs checkbox checked para os que já foram cadastrados no banco.

Não sei se aqui na especializati tem algo parecido, é praticamente um controle de permissão que estou criando em Laravel 9 e Vue.js 2. Seleciona as páginas e as ações dentro dessa página para determinado perfil do sistema.

Criador Wesley Kovalski 25/08/2022

Segue um print do modal:

https://ibb.co/cyzTfMK

Manager Carlos Ferreira 25/08/2022

Está ficando muito bonito o sistema amigo, parabéns.

--

No frontend, ao invés de pegar os dados do state, você pode pegar de um getter, assim você pode organizar os dados (usar apenas os valores que precisa);
(https://github.com/especializati/larachat/blob/main/resources/js/vuex/modules/users/getters.js)

Pegou a ideia amigo?

Criador Wesley Kovalski 25/08/2022

Consegui salvar no banco (tabela pivô) as páginas selecionada. Agora tenho que agrupar as ações selecionadas (Adicionar, Editar e Excluir) para determinada página. Vocês fazem consultoria? kkkk Algo mais vip, mostrando a tela do computador para ajudar em determinada aplicação.

Manager Carlos Ferreira 25/08/2022

Até faço consultorias, mas no momento está difícil de pegar novas, muitos jobs na fila heheheh

Se quiser postar aí onde travou, eu tento te ajudar.

Criador Wesley Kovalski 25/08/2022

Quando der posta algo sobre consultoria, eu super me interesso, ter um quadro onde os alunos posta suas dúvidas, e ter um sistema de votação, aquela dúvida que tiver mais votação o professor grava um vídeo mostrando como resolver kkkk.

Irei gravar um vídeo e postar o link aqui mostrando essa minha dúvida. Desde já, obrigado.

Manager Carlos Ferreira 25/08/2022

Vou te direcionar para outro canal de atendimento, encaminha ela com todos os detalhes para o e-mail [email protected] que vou te orientar baseado em minha experiência com o assunto.

Criador Wesley Kovalski 25/08/2022

Irei fazer um exemplo aqui:

Em uma lista de itens, dentro dela possui outra lista, o problema é que ao selecionar uma determinada ação, como por exemplo (Editar), as outras ações (Editar) também é selecionadas. Segue um exemplo:

new Vue({
el: "#app",
data: function() {
return {
listPermission: [
{ id: 1, name: "Vendedor", selected: false },
{ id: 2, name: "Administrador", selected: false },
{ id: 3, name: "Financeiro", selected: false },
],
listActions: [
{ action: 1, name: "Adicionar", selected: false },
{ action: 2, name: "Editar", selected: false },
{ action: 3, name: "Excluir", selected: false },
]
};
},
computed: {
selectedNames() {
return this.listActions
.filter(veggie => veggie.selected)
.map(veggie => veggie.name);
}
},
template: `
 <div class="list-of-yards">
 <h2>Páginas e suas Ações:</h2>

 <span>Páginas:</span>
 <br />
 <br />
 <div v-for="permission in listPermission">
 <input type="checkbox" v-model="permission.selected"> {{permission.name}}
 <br /><br />
 <span>Ações:</span>
 <div v-for="listAction in listActions">
 <input type="checkbox" v-model="listAction.selected"> {{listAction.name}}
 </div>
 <br />
 <br />
 <br />
 </div>
 <br />
 </div>
`
});

Criador Wesley Kovalski 25/08/2022

Estou encaminhando no [email protected]. Obrigado.