1
I have a problem, I need to access the list I create in the component selectprodutos and it persists, but the sending is made of another Component called formulario. They shall be arranged in the following order:
Blade>modal>formulario>selectproducts.
Then I would persist with the list created by the child component selectprodutos by the parent component formulario. Follow the code I tried:
Blade:
@extends('layouts.app')
@section('content')
<pagina tamanho="12">
@if($errors->all())
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
@foreach($errors->all() as $key => $value)
<p>{{$value}}</p>
@endforeach
</div>
@endif
<painel titulo="Lista de O.S.">
<tabela-lista
:titulos="['#','Nome','Registro','Vendedor','Operador','Data','Pragas','Produtos']"
itens=""
criar="#criar"
editar="/admin/os/"
deletar="/admin/os/"
token="{{csrf_token()}}"
ordem="desc"
ordemcol="0"
modal="sim">
</tabela-lista>
<div align="center">
{{-- {{$lista}}--}}
</div>
</painel>
</pagina>
<!-- MODAL ADD -->
<modal nome="adicionar" titulo="Adicionar">
<formulario id="formAdicionar" css="" action="{{route('operador.store')}}" method="post"
enctype="multipart/form-data" token="{{csrf_token()}}">
<div class="form-group">
<label for="nome">Nome</label>
<input type="text" class="form-control" id="nome" name="nome" placeholder="Nome do Operador" value="{{old('nome')}}">
</div>
<div class="form-group">
<label for="unmedida">Operadores</label>
<select class="form-control" name="operador" id="operador">
@foreach($operadores as $key => $operador )
<option value="{{ $key }}">{{ $operador }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="unmedida">Produtos</label>
<selectprodutos @mutableList="printMutableList" id="produtos" nome="produtos" :lista="{{$produtos}}"></selectprodutos>
</div>
<div class="form-group">
<label for="unmedida">Unidade de medida</label>
<input type="number" min="1" max="4" class="form-control" id="nivel" name="nivel" placeholder="Nivel de 1 a 4"
enctype="multipart/form-data" value="{{old('nivel')}}">
</div>
<div class="form-group">
<label for="registro">Registro NEOS</label>
<input type="text" class="form-control" id="registro" name="registro" placeholder="Registro no NEOS"
enctype="multipart/form-data" value="{{old('registro')}}">
</div>
</formulario>
<span slot="botoes"><button form="formAdicionar" class="btn btn-primary">Adicionar</button></span>
</modal>
<!-- MODAL EDIT -->
<modal nome="editar" titulo="Editar">
<formulario id="formEditar" css="" :action="'/admin/operador/' + $store.state.item.id" method="put" enctype="multipart/form-data" token="{{csrf_token()}}">
<div class="form-group">
<label for="nome">Nome</label>
<input type="text" v-model="$store.state.item.nome" class="form-control" id="nome" name="nome" placeholder="Nome do produto" >
</div>
<div class="form-group">
<label for="unmedida">Nivel</label>
<input type="number" min="1" max="4" class="form-control" :value="$store.state.item.nivel" id="nivel" name="nivel" placeholder="Nivel de 1 a 4"
enctype="multipart/form-data">
</div>
<div class="form-group">
<label for="registro">Registro NEOS</label>
<input type="number" class="form-control" id="registro" v-model="$store.state.item.registro" name="registro" placeholder="Registro no NEOS"
enctype="multipart/form-data">
</div>
</formulario>
<span slot="botoes"> <button form="formEditar" class="btn btn-info">Adicionar</button></span>
</modal>
{{--<!-- MODAL DETAIL -->--}}
{{--<modal nome="detalhe" v-bind:titulo="$store.state.item.titulo">--}}
{{-- <p>@{{$store.state.item.descricao}}</p>--}}
{{-- <br>--}}
{{-- <p>@{{$store.state.item.conteudo}}</p>--}}
{{--</modal>--}}
@endsection
{{--<style>--}}
{{-- .img {--}}
{{-- width: 100% !important;--}}
{{-- }--}}
{{--</style>--}}
<script>
import Selectproduto from "../../../js/components/SelectProdutos";
export default {
components: {Selectproduto}
}
</script>
in the component selectprodutos put an Emit in add method:
<template>
<div>
<select class="form-control" name="nomeselect" id="idselect">
<option v-for="(value, key) in lista"
:value="key"
:key="key">
{{value}}
</option>
</select>
<br>
<button type="button" v-on:click="addprd()" class="btn btn-primary btn-sm"> + </button>
<br>
<br>
<table v-if="this.mutableList != undefined" class="table">
<thead>
<tr>
<th scope="col"> Remover </th>
<th scope="col"> # </th>
<th scope="col">Produto</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in this.mutableList" :key="index">
<td><button type="button" v-on:click="rmprd(index)" class="btn btn-danger btn-sm"> x </button></td>
<td v-for="i in item" :key="i">{{i}}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: "selectproduto",
props:[
"nome",
"lista",
"id",
"selecionados"
],
data:function(){
return {
mutableList: this.selecionados
}
},
mounted() {
// console.log('oia a ');
},
methods: {
addprd: function() {
var e = document.getElementById("idselect");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;
if (this.mutableList == undefined) {
this.mutableList = new Array();
}
this.mutableList.push(new Array(value,text));
console.log(this.mutableList);
this.$emit("setParentComponentDetails");
},
rmprd: function(index) {
this.mutableList.splice(index);
if (this.mutableList.length <= 0){
this.mutableList = undefined;
}
console.log(this.mutableList);
}
}
}
</script>
In the component of formulario I put a method to give log just to see if the event was working:
<template>
<form v-bind:class="css" v-bind:action="action" v-bind:method="defineMethod" v-bind:enctype="enctype">
<input v-if="token" type="hidden" name="_token" v-bind:value="token">
<input v-if="alterMethod" type="hidden" name="_method" v-bind:value="alterMethod">
<slot></slot>
</form>
</template>
<script>
import SelectProdutos from './SelectProdutos.vue';
export default {
component:{
SelectProdutos
},
props:['css','action','method','enctype','token'],
data:function(){
return{
alterMethod:""
}
},
computed:{
defineMethod:function(){
if(this.method.toLowerCase() == "post" || this.method.toLowerCase() == "get"){
return this.method.toLowerCase();
}
if(this.method.toLowerCase() == "put"){
this.alterMethod="put";
}
if(this.method.toLowerCase() == "delete"){
this.alterMethod="delete";
}
return "post";
}
},
methods:{
printMutableList(){
console.log('Deu certo');
}
}
}
</script>
But he makes the following mistake:
If you put two methods:{) the second will replace the first, separate the methods methods:{ printMutableList() { ... }, addprd: Function() { ... } }
– Jorge Costa
the latter is in the form component, the first in the product selector component
– Kai
Enter the full code
– Jorge Costa
I’ve put down the Blade and the two components now
– Kai
<selectproducts @mutableList="printMutableList" printMutableList only exists within the <selectproducts> component and cannot be invoked outside
– Jorge Costa
What method do I use to retrieve the information from within the component then? my idea was to use this @mutableList="printMutableList" to capture the list from within the component through Emit
– Kai
Your component should generate an event (https://vuejs.org/v2/guide/components-custom-events.html) when the list changes ex. this. $Emit('listchanged') then on its outer component @listchanged="method_name a_run"
– Jorge Costa