Javascript 在Vue中单击元素后发生的事件

这是我关于VUE的第一篇文章。我尝试在Laravel中使用VUE。我有以下代码：

index.blade.php：

@extends('front._layout.main')

@section('content')
        <div class="container mx-auto" id="vue-rendered">
            <p class="text-white text-3xl">Płyty</p>

            <div class="mt-5 max-w-screen-md mx-auto text-text text-lg">
                <div class="text-right text-xl">
                    <div class="text-white">Sortowanie:</div>
                </div>
                xxxxx

                <product-list></product-list>


            </div>
        </div>

@endsection

app.js：

try {
    window._ = require('lodash');
    window.axios = require('axios');
    window.route = require('@/common/route');

    require('./libs/swal.js');
    require('./vue');
    require('./libs/multiselect.js');

    window.Vue = require('vue');

    Vue.component('product-list', require('./components/ProductList.vue').default);

    const app = new Vue({
        el: '#vue-rendered',
    })
} catch (e) {
    console.log(e);
}

我的问题是点击后没有操作#选择框。 我想要显示警报并运行函数showMultiselect

Htom，laravel显示正确的html代码

我怎样才能修理它

---

请帮帮我。我是Vue的初学者

查看Vue文件，您可以使用v-on:click（或@click）来处理单击事件-有关更多信息，请参阅。您还可以使用v-if指令处理复选框的条件呈现-有关详细信息，请参阅

使用以前的代码，.vue文件中的最终结果如下所示

ProductList.vue：

    <template>
        <form>
            <div class="multiselect">
                <div class="selectBox" id="selectBox">
                    <select>
                        <option>Typ</option>
                    </select>
                    <div class="overSelect"></div>
                </div>
                <div class="checkboxes">
                    <label for="one">
                        <input type="checkbox" id="one"/>First checkbox</label>
                    <label for="two">
                        <input type="checkbox" id="two"/>Second checkbox</label>
                    <label for="three">
                        <input type="checkbox" id="three"/>Third checkbox</label>
                </div>
            </div>
        </form>
    
    </template>
    
    <script>
    import axios from "axios";
    
    export default {
        name: "product-list",
        mounted() {
            this.loadProducts();
        },
        data() {
            return {
                products: [],
            }
        },
        methods: {
            loadProducts() {
                axios
                    .get(route('json.products.get.list'))
                    .then(response => {
                        this.products = _.get(response, "data", []);
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        }
    }
    
   window.onload = function () {
    var selectBox = new Vue({
        el: '#selectBox',
        data: {
            name: 'selectBox'
        },
        methods: {
            showMultiselect: function (event) {
                alert('It working')
                showMultiselect();
            }
        }
    });
}
    </script>

类型
第一个复选框
第二个复选框
第三个复选框
从“axios”导入axios；
导出默认值{
名称：“产品清单”，
安装的（）{
这是loadProducts（）；
},
数据（）{
返回{
产品：[]，
showMultiSelect:false，
}
},
方法：{
装载产品（）{
axios
.get（路由（'json.products.get.list'））
。然后（响应=>{
this.products=u2;.get（响应，“数据”，[]）；
})
.catch（错误=>{
console.log（错误）；
});
},
toggleMutliSelect（）{
警报（“正在工作”）
this.showMultiSelect=！this.showMultiSelect
}
}
}

谢谢。它正在工作，但我有一个小错误：app.js？id=188beef1eb4f28163bb9:23617[Vue warn]：未知自定义元素：-您正确注册了组件吗？对于递归组件，请确保提供“name”选项。（在中找到）通常与导入顺序相关，也可以是浏览器缓存。尝试刷新浏览器现金（ctrl+f5）-或者仔细检查有关注册的文档，确保您的代码复制正确的模式-

try {
    window._ = require('lodash');
    window.axios = require('axios');
    window.route = require('@/common/route');

    require('./libs/swal.js');
    require('./vue');
    require('./libs/multiselect.js');

    window.Vue = require('vue');

    Vue.component('product-list', require('./components/ProductList.vue').default);

    const app = new Vue({
        el: '#vue-rendered',
    })
} catch (e) {
    console.log(e);
}