Level 15
Okay when i add the:
<div id="app">
<example-component></example-component>
</div>
In the master blade template before the scripts tag its working, but when i add this in an @yield('content') it won't.
Any ideas why ?
Aug 31, 2018
7
Level 15
Vue Cannot find element: #app
im new to Vue and i want to try it i have an problem with the example component.
it shows [Vue warn]: Cannot find element: #app
I have the following:
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue'));
const app = new Vue({
el: '#app'
});
In blade view
<div id="app">
<example-component></example-component>
</div>
What im missing? i have added the defer to script again the same error.
Level 9
Does it help to move the script tag to the bottom of your master blade, after your @yield content. The #app elements needs to be loaded in the DOM before Vue runs.
1 like
Level 15
it is on to bottom, i have all my scripts at the end of </body> tag
Level 9
and the <div id="app"> element gets properly added to the DOM from the @yield tag?
Level 15
Okay i have another question, how can i display data and search with vue? What im trying is not working:
export default {
data() {
return {
hubs: []
}
},
methods: {
read() {
axios.get('hub').then(({ data }) => {
console.log("Went though" + data)
})
.catch((err) => console.error(err));
},
},
mounted() {
console.log('Component mounted.')
}
}
Level 14
You can solve this problem by adding script tag after you declare the #app element or just add 'async' on the script tag to skip this problem if you want.
<script src="{{ asset('js/app.js') }}" async defer></script>
1 like
Level 1
Great suggestion
Please or to participate in this conversation.