I am trying to make a VueJS app but I am failing even with the simplest examples.
I am using Laravel 5.3 with pre-built support for VueJS (version 1, I tried version 2 as well).
Here is my Example.vue component
<template>
<div class="profile">
{{ name }}
</div>
</template>
<script>
export default {
data () {
return {
name: 'John Doe'
}
}
}
</script>
And here is the main code
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
This is the error that shows up everytime in console:
[Vue warn]: Property or method "name" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in component )
Any ideas whats wrong?
Thanks
In your script tags instead of export default use:
module.exports = {
data() {
return { counter: 1 }
}
}
This should work for you
Call the component inside your template
Vue.component('example', {
template: `<div class="profile">{{ name }}</div>`,
data () {
return {
name: 'John Doe'
}
}
})
const app = new Vue({
el: '#app'
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app"><example></example></div>
The problem is that you are trying to load the component 'example' from that file but you didn't give a name to it. You should use:
<script>
export default {
name: 'example',
data() {
return {
name: 'John Doe'
}
}
}
</script>
Or load the component the following way (not sure if extension .vue is needed):
require('./exmaple').default();
If you are using Babel you can also load the components without giving them a name using this syntax:
import Example from ./example
Also checkout this post to get some more info in case you use Babel
Related
I got a simple single-file component called "MobileApps.vue":
<template>
<div class="grey-bg about-page">
<p>{{ greetings }}</p>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
greetings: "Hello"
}
}
};
</script>
And registering it:
const app = new Vue({
el: '#app',
router,
components: {
Home,
About,
Gas,
Electricity,
Contacts,
Electricity_info,
Gas_info,
MobileApps
},
data: {
},
created() {
},
destroyed() {
},
mounted() {
let mySVGsToInject = document.querySelectorAll('img.inject-me');
SVGInjector(mySVGsToInject);
},
methods: {
}
});
When I'm trying to open the HTML file with <MobileApps> component I'll get an error:
vue.esm.js:628 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
But even when I provide a name, nothing happens.
Try with cabeb-case format <mobile-apps> like :
<mobile-apps></mobile-apps>
Code in the file:
<template>
<component v-bind:is="bbc"></component>
</template>
<script>
import bbc from './bbc.vue';
export default {
name: 'ShowRoom2',
};
</script>
./bbc.vue
<script>
export default {
name: 'bbc',
props: {
msg: String,
},
mounted() {
console.log('bbc is mounted');
},
render() {
if (this.func) this.func();
return (
<div class="bbcMyClass">
<h1>bbc: <span>Pal</span> <span>{this.msg}</span></h1>
</div>
)
}
};
</script>
To reproduce
git clone git#github.com:adamchenwei/vue-hoc-playground.git
go to src/components/ShowRoom2.vue
yarn install && yarn serve
observe error in the local browser
Yes, the scope in the template is not the same as the script scope. If you need some data, you need to declare it inside the 'component' definition part of the code. For your case, I guess the 'data' property should work
import bbc from './bbc.vue';
export default {
name: 'ShowRoom2',
data() {
return {
bbc: bbc,
};
},
};
However, the template part of your code also looks weird. Could you explain what you're trying to do ?
After reading the vue.js docs I just jumped into components.
I want to create a custom (local) input component that emits an event to the parent on keyup, but I have two problems. (see code example at the end of the post)
[solved] 1. I already get an error when I register the child component that says
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <InputTest>
<Root>
I guess it's a complete no-brainer, but I just don't get it.
[solved] 2. The child event doesn't even fire
Before abstracting and simplyfing the code for this question I tried to create the same behaviour with single-file (.vue) components. With SFCs the template compiles / mounts successfully, but the child component events doesn't fire. Obviously I can not tell for sure if this problem will occur in my provided example as well, but I'd guess so.
EDIT 1: Solved problem 1
My child-component should be an object instead of a vue instance. I updated the code for that. I also changed the onChange method from lambda to function, as this doesn't point to the vue instance in a lambda.
EDIT 2: Solved problem 2
There may be times when you want to listen for a native event on the root element of a component.
Apparently the native modifier can only be used on components and not on native elements. Removing the modifier fixed the problem. I changed the code accordingly.
CODE
const inputText = {
data () {
return {
model: ''
}
},
template: '<input type="text" v-model="model" #keyup="onChange">',
methods: {
onChange: function () {
this.$emit('update', this.model);
}
}
};
const app = new Vue({
el: '#app',
data () {
return {
txt: ''
}
},
methods: {
onUpdate: function(txt) {
this.txt = txt;
}
},
components: {
'input-text': inputText
}
});
<script src="https://unpkg.com/vue#2.5.13/dist/vue.js"></script>
<div id="app">
<input-text #update="onUpdate"></input-text><br>
{{ txt }}
</div>
You don't need two vue instances. You can create a component as a simple object and use it in your vue instance
const inputText = {
template: '<div> <input type="text" #keyup.native="onChange"> </div>',
methods: {
onChange: () => {
console.log('onChange');
this.$emit('update')
}
}
}
const app = new Vue({
el: '#app',
template: '<input-test #keyup.native="onKeyup" #update="onUpdate"></input-test>',
methods: {
onUpdate: () => console.log('onUpdate'),
onKeyup: () => console.log('onKeyup')
},
components: {
'input-test': inputText
}
});
<script src="https://unpkg.com/vue#2.5.13/dist/vue.js"></script>
<div id="app"></div>
It's my first post on stackoverflow, so sorry in advance if I do something incorrectly. My question;
I've setup a VueJS project, and I'm trying to reach data that I put in the App.vue from another component. To do this, I use this.$root.count for example, but it returns undefined.
Main.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes: [{
path: '/',
name: 'home',
component: function (resolve) {
require(['./components/Hello.vue'], resolve)
}
}, {
path: '/race-pilot',
name: 'racePilot',
component: function (resolve) {
require(['./components/RacePilot.vue'], resolve)
}
}
});
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
});
App.vue:
<template>
<div>
<div class="menu" ref="menu">
<router-link :to="{ name: 'home' }">Home</router-link>
<router-link :to="{ name: 'racePilot' }">Race Pilot</router-link>
</div>
<div id="app">
<router-view></router-view>
</div>
</div>
</template>
<style src="./assets/css/app.scss" lang="scss"></style>
<script>
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
},
data () {
return {
count: '0'
}
}
}
</script>
RacePilot.vue:
<template>
<div class="race-pilot">
</div>
</template>
<script>
export default {
name: 'RacePilot',
mounted() {
console.log(this.$root.count);
}
}
</script>
So the last log returns undefined. However, if I log this.$root, I do get the object. Anybody any idea? Thanks in advance!
Vuex is fine and all, but if you just want to expose a property to all of your views in a router based app, you can set it on the router-view.
<router-view :count="count"></router-view>
Then your view component just needs to accept it as a prop.
export default {
props:["count"],
name: 'RacePilot',
mounted() {
console.log(this.count);
}
}
this.$root references the top level Vue instance (new Vue...) and not the App VueComponent.
it is really hacky, other solutions are preferable, but this could work:
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App },
methods: {
getCount() {
return this.$children[0].count
}
},
});
and using getCount() in RacePilot.vue:
export default {
name: 'RacePilot',
mounted() {
console.log(this.$root.getCount());
}
}
You are trying to access data which is stored in App.vue but this data will be local to the component and not accessible globally.
App.vue is not the root instance (referred to by $root), instead it is the first component within the root instance which is actually created at main.js. It is during this creation time, you need to pass the data which will then be exposed for all child components via $root.
Here is the relevant portion of main.js, modified accordingly :-
new Vue({
el: '#app',
data: { count: 0 },
router,
template: '<App/>',
components: { App }
});
Tip : To confirm that App.vue is indeed the first child of root instance, try comparing the references of this.$root with this.$parent. It should returntrue which means that root instance is the parent of App.vue.
References :-
https://v2.vuejs.org/v2/guide/instance.html
https://v2.vuejs.org/v2/api/#vm-root
https://v2.vuejs.org/v2/guide/components-edge-cases.html#Accessing-the-Root-Instance
It should had worked as it is, as it is working here.
However a better way to manage global variables, which are available across components should be solved by state machine. Vue has Vuex for that purpose as stated here.
You should not do it like that.
Definitely you should not try to access other components like that.
To share data between components you can either use props (one-way binding) or Vuex to make data accessible and editable from all components through store.
You can use global $store or $router if you will start your Vue app this way:
new Vue({
el: '#q-app',
router,
store
render: h => h(require('./App'))
})
Then you can access store (for state change or access state (do not mutate state this way)) - this.$store.state.yourStaneName
You can also make the App component the actual root by passing the component directly to the Vue instance, which would look something like this:
new Vue(App).$mount('#app')
You'll probably have to move the router to App.vue, but this will make sure that this.$root will resolve to your App component directly.
I'm learning Vue router. And I want to made programmatic navigation without using <router-link> in templates file.
My router and view:
router = new VueRouter({
routes: [
{path : '/videos', name: 'allVideos', component: Videos },
{path : '/videos/:id/edit', name: 'editVideo', component: VideoEdit },
]
});
new Vue({
el: "#app",
router,
created: function(){
if(!localStorage.hasOwnProperty('auth_token')) {
window.location.replace('/account/login');
}
router.push({ name: 'allVideos' })
}
})
So by default I push to 'allVideos' route and inside that component I have a button and method for redirecting to ''editVideo'
button:
<button class="btn btn-sm btn-warning" #click="editVideo(video)">Edit</button>
method:
editVideo(video) {router.push({ name: 'editVideo', params: { id: video.id } })},
It works fine. But when I try to get id inside a VideoEdit component using $route.params.id I got error Uncaught ReferenceError: $route is not defined
Maybe it's because I'm not using npm for now just a cdn version of Vue and Vuerouter. Any solutions? Thanks!
Updated: btw in Vue dev tool I see $route instance inside the component
Updated:
var VideoEdit = Vue.component('VideoEdit', {
template: ` <div class="panel-heading">
<h3 class="panel-title">Edit {{vieo.name}}</h3>
</div>`,
data() {
return {
error: '',
video: {},
}
},
created: function () {
console.log($route.params.id);
},
})
Thanks to Sandeep Rajoria
we found solution, need to use this.$route except $route inside a component
For those who getting the error after adding this
TypeError: Cannot read property '$route' of undefined
We need to use a regular function instead of ES6 arrow functions
data: function() {
return {
usertype: this.$route.params.type
};
},
This worked for me.
import Vue from 'vue'
import Router from 'vue-router';
Vue.use(Router)
const router = new VueRouter({
routes: [
{path : '/videos', name: 'allVideos', component: Videos },
{path : '/videos/:id/edit', name: 'editVideo', component: VideoEdit },
]
});
new Vue({
el: "#app",
router,
created: function(){
if(!localStorage.hasOwnProperty('auth_token')) {
window.location.replace('/account/login');
}
this.$router.push({ name: 'allVideos' });
}
})
If you're using vue v2 & vue-router v2 then in vue-cli generated boilerplate way to access router e.g. from component is to import router (exported in router/index.js)
<script>
import Router from '../router';
then in your code you can use router functions like:
Router.push('/contacts'); // go to contacts page
For those attempting to use es6 arrow functions, another alternative to #Kishan Vaghela is:
methods: {
gotoRegister() {
this.$router.push('register')
}
}
as explained in the first answer of Methods in ES6 objects: using arrow functions
In my case these previous solutions don't work for me so
i did the following
<script>
import Router from '../router';
then in your code you can use this one
this.$router.push('/contacts');