通过选择html

Question

我对Vue很陌生并且有疑问。

我有以下HTML日历。

<div class="year">2018</div>
<div class="month  disabled">JAN</div>
<div class="month  disabled">FEB</div>
<div class="month  disabled">MAR</div>
<div class="month  disabled">APR</div>
<div class="month  disabled">MAY</div>
<div class="month  disabled">JUN</div>
<div class="month  disabled">JUL</div>
<div class="month  disabled">AUG</div>
<div class="month  disabled">SEP</div>
<div class="month  disabled">OCT</div>
<div class="month  disabled">NOV</div>
<div class="month  ">DEC</div>
<br>

    <div class="year">2019</div>
    <div class="month  disabled">JAN</div>
    <div class="month  disabled">FEB</div>
    <div class="month  disabled">MAR</div>
    <div class="month  disabled">APR</div>
    <div class="month  disabled">MAY</div>
    <div class="month  disabled">JUN</div>
    <div class="month  disabled">JUL</div>
    <div class="month  disabled">AUG</div>
    <div class="month  disabled">SEP</div>
    <div class="month  disabled">OCT</div>
    <div class="month  disabled">NOV</div>
    <div class="month  ">DEC</div>
    <br>
    <div>
        {{product_list}}
    </div>
</div>

每次用户单击月份时，我要更新product_list，仅显示同一个月中的项目。本月是多选的。只能选择未禁用的div

例如，当用户在2018年选择JAN，MAR时，我要显示在2018年JAN和MAR中具有日期的产品。

这是相同的产品列表

 $product = [
            "id" => 1,
            "productDates" => [
                ["id" => 109,
                    "product_id" => 10,
                    "departure_date" => "2018-12-11"
                ],
                ["id" => 110,
                    "product_id" => 10,
                    "departure_date" => "2018-3-11"
                ],
                ["id" => 109,
                    "product_id" => 10,
                    "departure_date" => "2019-12-11"
                ],
                ["id" => 110,
                    "product_id" => 10,
                    "departure_date" => "2018-4-11"
                ],
                ["id" => 109,
                    "product_id" => 10,
                    "departure_date" => "2018-4-12"
                ],
                ["id" => 110,
                    "product_id" => 10,
                    "departure_date" => "2018-5-21"
                ],
            ]
        ];


 var opVm = new Vue({
        el: "#departure-date-list",
        data: {
            seasons:{!! json_encode($seasons) !!},
            product:{!! json_encode($product) !!},
            productDates:{!! json_encode($product->productDates) !!},
            datePax:{!! json_encode($datePax) !!},
        },
        methods: {
            select:function(year,month){
                console.log(year);
            }
        }
    });