cdyap
245
8
Vue

Laravel 5.8 and Vue doesn't load component

Posted 1 month ago by cdyap

Hello everyone! Trying to test Vue on Laravel 5.8. So far, the page loads data using Vue but doesn't respond to any modifications after loading.

Please find my code below. Upon loading, the select dropdown of cities works fine and loads through Vue/JS. After loading though, the form submits normally (i.e. through an HTML request instead of AJAX). I also added a test "message" variable that should supposedly get updated when the button is clicked but nothing happens.

On Chrome Vue Devtools, the component isn't detected. In the console however, i see the "Component mounted." alert.

i've also run "npm run watch" so the files are updated.

Please help me, thanks!

app.js

require('./bootstrap');

window.Vue = require('vue');
Vue.config.devtools = true

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

Vue.component('alerts', require('./components/Alerts.vue').default);
Vue.component('search-result', require('./components/SearchResult.vue').default);
Vue.component('search-bar', require('./components/SearchBar.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.
 */

var search = new Vue({
    el: '#app',
});

Imported app.js into the last line of my body already

Component file:

<template>
    <div class="row p-2">
        <alerts :alert="alerts"></alerts>
        <div class="search-bar bg-white rounded col">
            <span v-model="message">{{message}}</span>
            <form @submit.prevent="send">
                <div class="row">
                    <div class="col mb-3">
                        <select name="q[]" id="" class="form-control search-dropdown custom-select custom-select-lg" required v-model="fields.q">
                            <option selected disabled>Select a city</option>
                            <option v-for="city in cities">{{city.concatenated_name}}</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <button type="button" class="btn option" id="profession-btn" style="padding-left:5px!important;">Filter professions <img src="icons/caret-down-solid.svg" class="icon-caret"></button>
                        <button type="submit" class="btn gradient-button float-right">Find professionals</button>
                    </div>
                </div>
            </form>
            <button @click="test">Test</button>
        </div>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                cities: JSON.parse(JSON.stringify(window.__CITIES_LOADED__)),
                alerts: {},
                fields: {},
                message: "HELLO",
            }
        },
        methods: {
            send(e) {
                e.preventDefault();
                
                window.axios.post('/search', this.fields).then(response => {

                    alert('Message sent!');
                }).catch(error => {
                    if (error.response.status === 422) {
                    this.alerts = error.response.data.errors || {};
                }
                });
            },
            test() {
                console.log("Hi");
            }
        },
        mounted() {
            console.log('Component mounted.')
        },
        components: {

        }
    }
    function City({concatenated_name}) {
        this.concatenated_name = concatenated_name;
    }
</script>

Please sign in or create an account to participate in this conversation.