Event after click element in Vue

Question

This is my first post about VUE. I try use VUE in Laravel. I have this code:

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

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>

multiselect.js:

var expanded = false;

function showMultiselect() {
    var checkboxes = document.getElementsByClassName("checkboxes");
    if (!expanded) {
        checkboxes.style.display = "block";
        expanded = true;
    } else {
        checkboxes.style.display = "none";
        expanded = false;
    }
}

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

My problem is no action after click after click #selectBox. I want show alert and run function showMultiselect.

Htom, laravel show correct html code.

How can I repair it?

Please help me. I am beginner in Vue

Answer 1

Looking at the Vue file, you can handle click events using the v-on:click (or @click for shorthand) - see Vue Docs - Event Handling for more info. You can also handle conditional rendering of the checkboxes with the v-if directive - see Vue Docs - Conditional Rendering for more info.

The end result in the .vue file, using your previous code, would be something like this.

ProductList.vue:

  <template>
        <form>
            <div class="multiselect">
                <div class="selectBox" id="selectBox" @click="toggleMutliSelect">
                    <select>
                        <option>Typ</option>
                    </select>
                    <div class="overSelect"></div>
                </div>
                <div v-if="showMultiSelect" 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: [],
                showMultiSelect: false,
            }
        },
        methods: {
            loadProducts() {
                axios
                    .get(route('json.products.get.list'))
                    .then(response => {
                        this.products = _.get(response, "data", []);
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            toggleMutliSelect() {
                alert('It working')
                this.showMultiSelect = !this.showMultiSelect 
            }
        }
    }
    </script>