Question

我已经构建了一个vue组件，该组件将对象列表和两个条件列表作为道具。选择列表将传递到模板中的两个选择输入。更改任何一个列表时，将使用所选条件过滤列表。如何访问刀片文件中的此过滤列表？

这是我的代码。

刀片文件：

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

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',  
});

如您所见，我在组件中发出了一个输入事件，但是在访问刀片文件中的值时遇到了麻烦。

Answer 1

理想情况下，我想您要做的是将 SelecttableSelect 组件加载到另一个父Vue组件中。这样一来，您就可以将事件细化到父组件，并更轻松地使用数据。

我还没有对此进行测试，但是这与我开始做的事情是一致的。您需要根据自己的需要格式化输出。

Lessons.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',  
});

your.blade.php （请注意单引号）

<lessons :data-subjecttable='@json($subjectslessons)'
         :data-departments='@json($departments)'
         :data-subjects='@json($subjects)'>
</lessons>

如何使用刀片文件中Vue组件中的选择

1 个答案: