如何在我的刀片文件中使用我的 vue 组件中的选择

Posted 2023-02-23

【中文标题】如何在我的刀片文件中使用我的 vue 组件中的选择

【英文标题】：How to use the selection from my vue component in my blade file

【发布时间】：2019-11-23 14:20:56

【问题描述】：

我已经构建了一个 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',  
);

如您所见，我在组件中发出了一个输入事件，但我无法访问刀片文件中的值。

【参考方案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>

【讨论】：

谢谢，但是如果我正确解释了您的答案，您会说无法直接在刀片中使用所选列表，例如在 foreach 循环中。我仍然必须将我的 vue 组件包装在另一个组件中。

Blade 是一个 php 模板解决方案。 PHP 是一种服务器端代码。这意味着所有 PHP 处理都在您的数据离开服务器之前完成。 Vue（Javascript）是客户端代码，在服务器发送页面内容后在客户端（用户）机器上处理。所以不，你不能在已经加载的页面上运行额外的 PHP。