He construido un componente VUE que requiere una lista de objetos y dos listas de criterios como accesorios. Las listas de selección se pasan a dos entradas de selección en la plantilla. Cuando se cambia, la lista se filtra utilizando los criterios seleccionados. ¿Cómo obtengo acceso a esta lista filtrada en mi archivo de cuchillas?

Aquí está mi código.

Archivo Blade:

<subjecttable-select :data-subjecttable="{{$subjectslessons->toJson()}}"
                                 :data-departments="{{$departments->toJson()}}"
                                 :data-subjects="{{$subjects->toJson()}}" @input="selectedsubjects">
</subjecttable-select>
@{{selectedsubjects}}

Componente vue

<template>
<div >
<div class="row mb-2 mx-2">
    <form class="form-inline justify-content-between" >
    <div class="form-group row mb-1">
        <label class="col-auto  col-form-label text-md-left" for="department">Leerjaar</label>
        <div class="col-auto">
            <select id= "department" class="form-control form-control-sm custom-select" v-model="department" @change="select()">                
                <option v-for="department_item in dataDepartments" :value="department_item['id']">
                    {{department_item["name"]}}
                </option>
            </select>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-auto  col-form-label text-md-leftt" for="subject">Vak</label>
        <div class="col-auto">
            <select id="subject" class="form-control form-control-sm custom-select" v-model="subject" @change="select()">               
                <option v-for="subject_item in dataSubjects" :value="subject_item['id']">
                    {{subject_item["description"]}}
                </option>
            </select>
            </div>
        </div>

    <button class="btn-outline-primary" @click="reset()">Reset</button>

    </form>

</div>

</div>
</template>

<script>

export default {
    name:"subjecttable-select",
    props: {
        dataDepartments: { type: Array, required: true },
        dataSubjects:{ type: Array, required: true},
        dataSubjecttable: {type: Array, required: true },
        value:{},
      },

    data() {
        return {
            selected:this.dataSubjecttable,
            subject:"",
            department:"",
        }
    },
    methods:{
        select(){
              var item;
              console.log(this.subject);
              this.selected=[];
              for(item of this.dataSubjecttable){
                  if(//get the subbejctlessons who are in the selected department
                        (this.department==="" || item["department_id"]===this.department) &&
                     //whose subject is the selected subject
                        (this.subject===""|| item["subject_id"]===this.subject)  
                    ){

                      this.selected.push(item);
                  }
              }
              this.$emit('input',this.selected);
          },
        reset(){
            this.value = this.dataSubjecttable;
            this.subject = "";
            this.department="";
          },

    },
    created(){
        this.select();
    },
    filters: {
        dateFilter(value){
            var isDate = !isNaN(Date.parse(value));
            if (isDate ){
                var dateValue=new Date(value);
                return dateValue.toLocaleDateString();
            }
            else{
                return value;
            }
        }
      },
};
</script>

App.js

Vue.component('subjecttable-select', require('./components/SubjectSelection.vue').default);

/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/

const app = new Vue({
    el: '#app',  
});

Como puede ver, emite un evento de entrada en mi componente, pero tengo problemas para acceder al valor en el archivo Blade.

0
KvdLingen 14 jul. 2019 a las 21:58

1 respuesta

La mejor respuesta

Idealmente, creo que usted quiere hacer es cargar su selectableselect componente dentro de otro componente de padre Vue. Esto le permitirá gotear sus eventos al componente principal y usar los datos mucho más fácilmente.

No he probado esto, pero está en la línea de lo que haría para comenzar. Necesitaría formatear la salida a sus necesidades.

lecciones.vue

<template>
    <div>

        <!-- YOUR SELECT IS NOW DEFINED HERE, NOT IN THE BLADE FILE -->
        <!-- Select -->
        <subjecttable-select :data-subjecttable="dataSubjecttable"
                             :data-departments="dataDepartments"
                             :data-subjects="dataSubjects"
                             @input="updateResults"
        >
        </subjecttable-select>
        <!-- End Select  -->

        <!-- Department -->
        <div>
            <h1>Department</h1>
            <div v-if="results.department_id > 0">
                <ul>
                    <li v-for="(value, index) in findElementById(dataDepartments, results.department_id)">
                        {{ index }} : {{ value }}
                    </li>
                </ul>
            </div>
        </div>
        <!-- End Department  -->

        <!-- Subject -->
        <div>
            <h1>Subject</h1>
            <div v-if="results.subject_id > 0">
                <ul>
                    <li v-for="(value, index) in findElementById(dataSubjects, results.subject_id)">
                        {{ index }} : {{ value }}
                    </li>
                </ul>
            </div>
        </div>
        <!-- End Subject -->

    </div>
</template>

<script>

    // import your select component
    import SubjecttableSelect from './SubjecttableSelect';

    export default {
        components: {
            // register the component
            SubjecttableSelect,
        },
        props: {
            dataDepartments: { type: Array, required: true },
            dataSubjects:{ type: Array, required: true},
            dataSubjecttable: {type: Array, required: true },
        },
        name: "Lessons",
        data() {
            return {
                results: {
                    subject_id: 0,
                    department_id: 0,
                },
            }
        },
        methods: {
            updateResults(data) {
                this.results = data;
            },
            findElementById(element, id) {
                return element.find(el => el.id === id);
            }
        },
    }
</script>

<style scoped>

</style>

app.js

// register the new component
Vue.component('lessons', require('./components/Lessons.vue').default);

// subjecttable-select can now be imported within lessons

const app = new Vue({
    el: '#app',  
});

su.blade.php (tenga en cuenta las citas individuales)

<lessons :data-subjecttable='@json($subjectslessons)'
         :data-departments='@json($departments)'
         :data-subjects='@json($subjects)'>
</lessons>
0
matticustard 14 jul. 2019 a las 21:25