Vue js观看Vue漂亮的复选框值

问题描述

我正在使用vue pretty复选框显示一个复选框。但是，根据是否选中了其中一​​个复选框，我的内容必须更改！因此，我需要在这些非常漂亮的复选框组件上使用侦听器之类的东西。

但是，因为vue pretty复选框是一个程序包，所以我无法修改代码。现在我的问题是，如果这些复选框已从其他组件更改，我该如何收听它们。

因为products-manager组件获取值。因此，每当p-check内product-filter的复选框的值更改时，我都需要将其传递给products-manager组件以重新加载数据！

关于如何执行此操作的任何想法？我已经尝试过this和this，但这些命令对我没有帮助...

非常重要：复选框的数量是动态的，如下所示。前两个复选框始终存在，但是下面的复选框由v-for生成！

这是我到目前为止的源代码（主模板）：

<div id="home" class="row">
    <div class="col-xl-12" id="product-sort-and-filter">
        <products-filter ref="productsFilter" :product-types-prop="{{ json_encode($productTypes) }}"></products-filter>
    </div>
    <div class="col-xl-9">
        <div class="products">
            <products-manager ref="productsManager" :products-prop="{{ json_encode($products) }}" auth="{{ \Illuminate\Support\Facades\Auth::check() }}" :userprop="{{ json_encode(\Illuminate\Support\Facades\Auth::user()) }}" route="{{ route('product.index') }}"></products-manager>
        </div>
    </div>
    <div class="col-xl-3">
        <sidebar-manager ref="SidebarManager" :top-products-today-prop="{{ json_encode($products) }}" :top-products-week-prop="{{ json_encode($products) }}" :top-products-month-prop="{{ json_encode($products) }}"></sidebar-manager>
    </div>
</div>

产品过滤器组件：

<template>
    <div class="product-sort-and-filter-wrapper d-flex">
        <div class="col-xl-9 product-sorting no-padding">
            <ul class="list-inline">
                <li class="list-inline-item">Highlights</li>
                <li class="list-inline-item">Aktuell</li>
                <li class="list-inline-item">diskutiert</li>
            </ul>
        </div>
        <div class="col-xl-3 product-filter no-padding text-right">
            <div class="dropdown d-inline-flex">
                <a href="#" class="btn btn-primary" data-toggle="dropdown"><i class="fas fa-filter"></i>FILTERN</a>
                <div class="dropdown-menu" style="margin-top: 0px">
                    <div class="productTypesBoxes dropdown-item pretty-checkBox-wrapper">
                        <p-check name="productExpiredCheckBox" class="p-svg p-plain p-bigger p-smooth" ref="showExpired" toggle true-value false-value>
                            <span class="checkBox-label on rubik-medium">Abgelaufene anzeigen</span>
                            <label slot="off-label"><span class="checkBox-label off rubik-medium">Abgelaufene anzeigen</span></label>
                            <span slot="extra" class="svg"><i data-feather="check-square"></i></span>
                            <span slot="off-extra" class="svg"><i data-feather="square"></i></span>
                        </p-check>
                    </div>
                    <div class="dropdown-divider"></div>
                    <div class="productTypesBoxes dropdown-item pretty-checkBox-wrapper">
                        <p-check name="productTypeCheckBox" class="p-svg p-plain p-bigger p-smooth" ref="showAllProductTypes" toggle true-value false-value checked>
                            <span class="checkBox-label on rubik-medium">Alle anzeigen</span>
                            <label slot="off-label"><span class="checkBox-label off rubik-medium">Alle anzeigen</span></label>
                            <span slot="extra" class="svg"><i data-feather="check-square"></i></span>
                            <span slot="off-extra" class="svg"><i data-feather="square"></i></span>
                        </p-check>
                    </div>
                    <div class="productTypesBoxes sub dropdown-item pretty-checkBox-wrapper" v-for="productType in productTypes">
                        <p-check name="productTypeCheckBox" :value="productType.id" class="p-svg p-plain p-bigger p-smooth" :ref="'productType' + productType.id" toggle>
                            <span class="checkBox-label on ">{{ productType.label }}</span>
                            <label slot="off-label"><span class="checkBox-label off ">{{ productType.label }}</span></label>
                            <span slot="extra" class="svg"><i data-feather="check-square"></i></span>
                            <span slot="off-extra" class="svg"><i data-feather="square"></i></span>
                        </p-check>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ProductsFilter",props: ['productTypesProp'],data() {
            return {
                highlights: true,aktuell: false,diskutiert: false,showExipredDeals: false,productTypes: this.productTypesProp
            }
        }
    }
</script>

<style scoped>

</style>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）