I'm setting up Vue in my Laravel project. The page and the Vue component loads the data on initial load (see the cities dropdown). After loading however, any changes to the components aren't recorded.
At first, I tried attaching a get request to the form submit but the form submits normally (i.e. through an HTTP request instead of AJAX/Vue). I added a test variable (message) and tried to update it on button click but it doesn't update too. It updates in the mounted() function though.
Vuetools detects Vue on my page but doesn't detect the actual component ("This instance has no reactive state"). Please help!
bootstrap.js
require('./bootstrap');
window.Vue = require('vue');
Vue.config.devtools = process.env.NODE_ENV === 'development';
/**
* 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.
*/
const app = new Vue({
el: '.search',
});
webpack.min.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/main.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.version();
index.blade.php
@extends('layouts.app')
@section('custom_head')
<script type="text/javascript">
window.__CITIES_LOADED__ = {!!$cities!!}
</script>
@endsection
@section('content')
<div class="container search">
<alerts></alerts>
<div class="row">
<div class="col">
<h1 class="text-bold mb-5">Search</h1>
</div>
<div class="col-md-10">
<search-bar></search-bar>
</div>
</div>
</div>
<div class="w-100 mb-5 mt-5"><hr></div>
@endsection
app.template.php
<!-- head code -->
<body>
<div class="search">
@yield('content')
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<script type="text/javascript" src="" defer></script>
<script type="text/javascript" src=""></script>
@yield('custom_js')
</body>
SearchBar component file
<template>
<div class="row p-2">
<div class="search-bar bg-white rounded col">
<span v-model="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"></option>
</select>
</div>
</div>
<div class="row">
<div class="col">
<input type="text" hidden style="display:none;">
<button type="submit" class="btn gradient-button float-right">Find professionals</button>
</div>
</div>
</form>
<button v-on:click="warn('Form cannot be submitted yet.', $event)">Test</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
cities: JSON.parse(JSON.stringify(window.__CITIES_LOADED__)),
alerts: {},
fields: {},
message: "HELLO",
}
},
methods: {
send() {
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.');
this.message="Hi";
},
components: {
}
}
function City({concatenated_name}) {
this.concatenated_name = concatenated_name;
}
</script>
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire