I am new in vue js, I am learning components. I have created a basic program containing component. Following are my files
project/src/main.js
import Vue from 'vue'
window.Vue = Vue;
import ButtonCounter from './components/ButtonCounter.vue'
new Vue({
el: '#components-demo',
render: h => h(ButtonCounter)
})
project/src/components/ButtonCounter.vue
<template>
<div id="components-demo">
<button-counter></button-counter>
</div>
</template>
<script>
// Define a new component called button-counter
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
</script>
When I execute this, I get following error, even though I have declared Vue globally in main.js
So it looks like you took the component definition and just moved to another file. If you move to another file you don't need to use Vue.component. You just export an object containing the data, methods, etc. that you want attached to the component. And inside the Vue instance you attach the imported component via the components property. I.e.
Main index.html
<div id="components-demo">
<button-counter></button-counter>
</div>
Component.vue
<template>
<button v-on:click="count++">You clicked me {{ count }} times.</button>
</template>
<script>
export default {
data: function () {
return {
count: 0
}
}
})
</script>
Then inside your main file
import Vue from 'vue'
// window.Vue = Vue; -- don't need this anymore
import ButtonCounter from './components/ButtonCounter.vue'
new Vue({
el: '#components-demo',
render: h => h(ButtonCounter),
components: {ButtonCounter}
})
The error is in this line
window.Vue = Vue;
Just import and create a new instance of Vue
import Vue from 'vue'
import ButtonCounter from './components/ButtonCounter.vue'
new Vue({
el: '#components-demo',
render: h => h(ButtonCounter)
})
Related
I am working in Laravel Blade and trying to convert some blade files to vue components. I have a property in my blade file of pagetitle. I am trying to get the dynamically created page title to render on the screen from my vue component and not blade. But in my vue console, data comes back as "". Not sure why the data is carrying over.
Header.vue
<template>
<div>
<p title="page-title">{{pageTitle}}</p>
</div>
</template>
<script>
export default {
props: {
pageTitle: {
type: String
}
}
}
</script>
app.js
window.Vue = require('vue');
import Header from './components/Header';
Vue.component('header', Header);
const app = new Vue({
el: '#app',
});
main.blade.php
<div id="app">
<header :page-title="{{$pageTitle}}"></header>
</div>
header.blade.php //where page title is being pulled from
<title>
{{ $pageTitle ?? 'Default Page Title' }}
</title>
In your Header.vue file you are defining pageTitle as a data property, while it should be defined as a prop, since you are actually providing it as a property on the header component.
props: {
pageTitle: {
type: String
}
}
There already exists an HTML element called header, I suggest you rename your component. Your component is missing a props attribute to take input from blade:
Pagetitle.vue:
<template>
<div>
<p title="page-title">{{ this.pageTitle}}</p>
</div>
</template>
<script>
export default {
props: ['title'],
data() {
return {
pageTitle: '',
};
},
created() {
this.pageTitle = this.title
}
}
</script>
We created a title property. When the component is created, we set the component's pageTitle to the title given in main.blade.php.
app.js
window.Vue = require('vue');
import Pagetitle from './components/Pagetitle';
Vue.component('pagetitle', Pagetitle);
const app = new Vue({
el: '#app',
});
main.blade.php
<div id="app">
<pagetitle :title="foo bar"></pagetitle>
</div>
https://v2.vuejs.org/v2/guide/components-props.html
I'm practicing laravel with vuejs and I'm wondering if possible to use vuejs (component) variable in other file with pure javascript.
I created my.js and registered it in app.js.
require('./my.js');
const app = new Vue({
el: '#app'
});
In my.js I have following code.
alert(app.name)
name is variable used in vuejs component. As a result I received alert undefined. Please give me some guidelines.
You must run the code in the correct order:
function MyFunc(vm) {
alert(vm.name)
}
const app = new Vue({
data: {
name: 'FooBar'
}
});
MyFunc(app)
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
Example 1
my.js:
export default function(vm) {
alert(vm.name);
}
main.js:
import Vue from "vue";
import MyFunc from './my';
const app = new Vue({
data: {
name: 'FooBar'
}
});
MyFunc(app)
Example 2
my.js:
export default (app) => alert(app.name);
vue.js:
import Vue from 'vue';
export default new Vue({
data: {
name: 'FooBar'
}
});
main.js:
import bar from './vue'
import foo from './my'
foo(bar)
I'm trying to define a component in my global Vue() init and have successfully defined the template for the component but cannot seem to define the actual class that is performing the work for the template. I am using Vue with typescript.
import ListClubsComponent from "./components/ts/list-club";
new Vue({
el: "#app",
components: {
"list-clubs": {
template: require("./components/clubs/list-clubs.html"),
model: ListClubsComponent // This should be the class for the template
}
}
});
Instead of defining the template for your component at the global Vue() component level, try defining it inside of './components/ts/list-club':
var ListClubsComponent = {
template : ...,
data:...
...
}
Then import and register that entire component altogether at the global Vue() component:
import ListClubsComponent from "./components/ts/list-club";
new Vue({
...
components : {
'list-clubs' : ListClubsComponent
}
...
})
This should also be easier to maintain since the template is grouped together with its functionality.
More info at https://v2.vuejs.org/v2/guide/components-registration.html#Local-Registration
I have main.js and app.vue file
main js file inner look like this
var a = 1;
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
in App.vue file i want to console.log(a)
return error a is not defined why ? What is wrong ?
You need to export the variable, and then import it into another file where you want it. The best way to do that would be to put the variable a in its own module file. This allows you to avoid using global variables, which pretty much negate the purpose of modules!
a.js:
export const a = 'foo'
App.vue:
<script>
import { a } from './a.js'
console.log(a) // foo
console.log(1)
export function log3() {
console.log(3)
}
</script>
main.js:
import { log3, default as App } from './App.vue'
console.log(2)
log3()
new Vue({
el: '#app',
render: h => h(App)
})
import { a } from './a.js'
console.log(a) // foo
Here is what will be logged to the console:
'foo' (from App.vue)
1 (from App.vue)
2 (from main.js)
3 (from main.js calling the function log3 from App.vue)
'foo' (from main.js)
Now both App.vue and main.js have access to a, because they have explicitly imported it. The fact that App.vue has access to a has nothing to do with the fact that main.js also has access to a.
The simplest thing you can do I guess is define data properties insode root instance, and access them as this.$root.myProperty from components:
new Vue({
el: '#app',
data: {
myGlobal: 'Hi there'
},
components: {
'child' : {
template: `<p>{{ text }}</p>`,
data: function() {
return {
text: this.$root.myGlobal
}
}
}
}
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<child></child>
</div>
Another option - a simple plugin as a central storage: https://stackoverflow.com/a/44517332/7636961
a is not defined in your App component but directly in main.js.
You may want to use a global variable. (see also this thread for global variable in vuejs)
main.js:
import Vue from 'vue'
import App from './app.vue'
let vm = new Vue({
el: '.layers-container',
render: h => h(App),
})
//This doesn't work, layers undefined
console.log(vm.layers);
//This doesn't work either
vm.layers.push({'name': 'image2'})
app.vue using vue-loader:
<template>
<div>
<div v-for="item in layers>
<a :href="item.name"></a>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
layers: [{'name': 'image1'}]
}
}
}
</script>
I have objects from a canvas that are treated as layers I want to add to this list, so I'm trying to take the instance of Vue and push objects onto it so it then updates the data in the template. But, it seems that I can't actually do that outside of the component itself, and I don't know if I'm just doing it wrong, or if I really have to put the rest of my code into the components.
How would I push the data as exampled above, to the layers array in app.vue?