I'm new to Vue and am having some trouble with a few things. First, off I was following this tutorial: eventbus. If I put all the code (html, JS and CSS) in one html file, this works just as described in this tutorial.
However, I have been reading and I was following a VUE cli app structure. I used
vue init webpack vueapp01
So, I have an index.html file in the vueapp01 root folder, in the src folder I have an app.vue and two vue files in the components folder; the-box.vue and the-button.vue; along with all the other files loaded by the vue template webpack.
Instead of having all the code in one html file (which works) I have the code separated out like this:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vueapp01</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
App.vue:
<template>
<div id="the-example" class="container">
<h1>Building an Event Bus with Vue.js</h1>
<div class="row">
<div class="col-xs-6">
<the-button what="Event #1"></the-button>
<the-button what="Event #2"></the-button>
<the-button what="Event #3"></the-button>
</div>
<div class="col-xs-6">
<the-box name="Receiver #1"></the-box>
</div>
</div>
</div>
</div>
</template>
<script>
import the-button from './components/the-button'
import the-box from './components/the-box'
export default {
name: 'app',
components: {
the-button,the-box
}
}
</script>
<--
<script>
/******************************************
The Central Event Bus Instance
*******************************************/
let EventBus = new Vue();
</script>
the-box.vue:
/******************************************
Example Root Vue Instance
*******************************************/
new Vue({el: "#the-example"});
/******************************************
A sample Vue.js component that emits an event
*******************************************/
let TheButton = Vue.extend({
name: "the-button",
props: ["what"],
template: `
<button class="btn btn-md btn-success the-button" #click="makeItHappen()">Sender: {{what}}</button>
`,
methods: {
makeItHappen: function(){
EventBus.$emit("somethingHappened", this.what)
}
}
});
Vue.component("the-button", TheButton);
the-button.vue:
/******************************************
A sample Vue.js component that received an event
*******************************************/
let TheBox = Vue.extend({
name: "the-box",
props: ["name"],
template: `
<div class="well">
<div class="text-muted">{{name}}</div>
<div>{{respondedText}}</div>
</div>
`,
data: function(){
return {
respondedText: null
}
},
created: function(){
EventBus.$on('somethingHappened', (what)=>{
this.respondedText = 'Event Received: ' + what;
})
console.log("Responder")
}
});
Vue.component("the-box", TheBox);
Currently, I'm getting the errors, "unknown custom element the-box", "unknown custom element the-button". I've tried switching the script and template orders to have templates load first but I still have no luck.
Any help would be greatly appreciated. Also, I assume I'm doing this correctly by separating these components out to separate files but if that is incorrect I'd gladly take criticism on the way I'm learning to use Vue.
Change:
import the-button from './components/the-button'
import the-box from './components/the-box'
to
import TheButton from './components/the-button'
import TheBox from './components/the-box'
and do
components: {
TheButton,
TheBox,
}
There must be another far larger error somewhere you're somehow not seeing.
Here is a full example of how the files should look to implement that fiddle in single file components assuming you used vue init webpack <project>.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bus</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
main.js
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
window.EventBus = new Vue()
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
App.vue
<template>
<div id="the-example" class="container">
<h1>Building an Event Bus with Vue.js</h1>
<div class="row">
<div class="col-xs-6">
<the-button what="Event #1"></the-button>
<the-button what="Event #2"></the-button>
<the-button what="Event #3"></the-button>
</div>
<div class="col-xs-6">
<the-box name="Receiver #1"></the-box>
<the-box name="Receiver #2"></the-box>
<the-box name="Receiver #3"></the-box>
</div>
</div>
</div>
</template>
<script>
import TheButton from './components/TheButton.vue'
import TheBox from './components/TheBox.vue'
export default {
name: 'app',
components: {
TheButton, TheBox
}
}
</script>
components/TheBox.vue
<template>
<div class="well">
<div class="text-muted">{{name}}</div>
<div>{{respondedText}}</div>
</div>
</template>
<script>
export default {
name: "the-box",
props: ["name"],
data: function(){
return {
respondedText: null
}
},
created: function(){
EventBus.$on('somethingHappened', (what)=>{
this.respondedText = 'Event Received: ' + what;
})
console.log("Responder")
}
}
</script>
components/TheButton.vue
<template>
<button class="btn btn-md btn-success the-button" #click="makeItHappen()">Sender: {{what}}</button>
</template>
<script>
export default {
name: "the-button",
props: ["what"],
methods: {
makeItHappen: function(){
EventBus.$emit("somethingHappened", this.what)
}
}
}
</script>
Related
When I import a component with VueJs content into another component with VueJs content I get this error:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.
example.blade.php is the component
<div id="appComp">
#{{ msg }}
</div>
<script>
var appComp = new Vue({
el: '#appComp',
data: {
msg : #json($msg),
}
});
</script>
app.blade.php which imports the example component
<head>
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
</head>
<div id="app">
<x-example/>
#{{ text }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
text: #json($text),
}
});
</script>
if I move <x-example/> out <div id="app">, everything works fine, but it's not good for me.
<x-example/>
<div id="app">
#{{ text }}
</div>
What solutions can I find to use Laravel blades with VueJs source code?
I have my input field in one div, and will have label in another div (as sidebar in my application). I want to update label in sidebar, as I type in input on first div.
I am happy to create second div a component if that's the way. I was reading online, and it was said we could use props to pass data to component. But I am not able to link input field to component. Please find my code as below:
var app = new Vue({
el: '#div1',
data: {
message: ''
}
})
Vue.component('testp', {
props: ['message'],
template: '<p>Message is: {{ message }}</p>'
})
var div2 = new Vue({
el: '#div2'
});
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div1">
<input v-model="message" placeholder="edit me">
</div>
<div id="div2">
<testp></testp>
</div>
</body>
</html>
As Pointed in Comment You have no reason to have two separate Vue instance and the First Answer is correct. But in some cases where you really need to have multiple Vue instances, you can actually use them in the following manner.
var app = new Vue({
el: '#div1',
data: {
message: ''
}
})
Vue.component('testp', {
props: ['message'],
template: '<p>Message is: {{ message }}</p>'
})
var div2 = new Vue({
el: '#div2',
computed: {
newMessage() {
return app.message;
}
},
});
Html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div1">
<input v-model="message" placeholder="edit me">
</div>
<div id="div2">
<testp :message="newMessage"></testp>
</div>
</body>
</html>
Please observe the computed value newMessage is actually getting its value form a different Vue instance (app) and it is also reactive. Therefore whenever the value in first Vue instance changes, it is updated in another Vue instance.
Codepen: https://codepen.io/ashwinbande/pen/xMgQQz
Like I have pointed out in my comments, there is no reason for you to use two separate Vue instances. What you can do is simply wrap everything within an app container, e.g. <div id="#app">, and then instantiate your VueJS instance on that element instead.
Then, you can use v-bind:message="message" on the <testp> component to pass in the message from the parent. In this sense #div1 and #div2 are used entirely for markup/decorative purposes and are not used as VueJS app containers in your code.
Vue.component('testp', {
props: ['message'],
template: '<p>Message is: {{ message }}</p>'
});
var app = new Vue({
el: '#app',
data: {
message: ''
}
});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<div id="div1">
<input v-model="message" placeholder="edit me">
</div>
<div id="div2">
<testp v-bind:message="message"></testp>
</div>
</div>
While studying Vue By self-taught, I faced some problem.
First, I bind some component by new Vue ({el:" # id "}).
And when I bind root component <div id = "app"> by new Vue ({el:" # app "}),
It ruin what already was binding there.
My function and data in new Vue ({el:" # id "}) didn't work anymore.
Am I doing the wrong design?
If so, how should I approach the problem?
<html>
<head>
<script src="https://unpkg.com/vue#2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div id="comp-a">
<input type="text" v-model="message"/>
{{message}}
</div>
</div>
</body>
<script>
new Vue({
el : "#comp-a",
data : {
message : "message"
}
})
new Vue({
el : "#app"
})
</script>
You can use component.
reference: https://v2.vuejs.org/v2/guide/components.html
let comp_a=Vue.component('comp-a', {
data: function () {
return {
message: ""
}
},
template: ` <div><input type="text" v-model="message"/>
{{message}}</div>`
});
let app = new Vue({
el:"#app"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<comp-a></comp-a>
</div>
If you want to component's html code in html area. template can point to by id. you can do following:
let comp_a=Vue.component('comp-a', {
data: function () {
return {
message: ""
}
},
template: "#comp-a"
});
let app = new Vue({
el:"#app"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<comp-a></comp-a>
</div>
<template id="comp-a">
<div>
<input type="text" v-model="message"/>
{{message}}
</div>
</template>
VueJS does not work this way. You don't nest IDs. You could do this:
<html>
<head>
<script src="https://unpkg.com/vue#2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
</div>
<div id="comp-a">
{{message}}
</div>
</body>
<script>
new Vue({
el : "#app"
})
new Vue({
el : "#comp-a",
data : {
message : "message"
}
})
</script>
But even that approach has problems. You really should have only one matching VueJS area.
The only reason to have two is if you really have two applications running on the same html file. I have never seen a reason to do that.
I am working on a Vue application. I use bootstrap-vue navbar from this official example in my application. But, when I run my project, in the console, Vue keeps warning me about the unknown custom element <b-nav-brand> which I have included in my main.js.
Here is my set up if you have any ideas.
Error:
[Vue warn]: Unknown custom element: - did you register
the component correctly? For recursive components, make sure to provide
enter code here enter code here the "name" option.
Navbar Code:
<b-navbar class="nav-bar" toggleable="sm">
<b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
<b-nav-brand class="logo" href="#">
<img src="/static/images/boost-icon.svg" alt="Boost icon"/>
<h1>Portal</h1>
</b-nav-brand>
<b-collapse is-nav id="nav_collapse">
<b-navbar-nav class="ml-auto">
<b-nav-item href="">
<span class="btn btn-primary btn-request-access">Request Access</span>
</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
Main.JS:
Vue.use(BootstrapVue)
new Vue({
el: '#app',
router: router,
template: '<App/>',
store: store,
components: {
App
}
})
Because its <b-navbar-brand> in the docs.
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css"/>
<script src="//unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div>
<!-- Image and text -->
<b-navbar variant="faded" type="light">
<b-navbar-brand href="#">
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="BV">
BootstrapVue
</b-navbar-brand>
</b-navbar>
</div>
You can also import it
import { BNavbar } from 'bootstrap-vue'
Vue.component('b-navbar', BNavbar)
or
import { NavbarPlugin } from 'bootstrap-vue'
Vue.use(NavbarPlugin)
On the bootstrap-vue docs they like to tell you how you can get started, import, at the bottom of the page.
Just import whatever you want to use.
Here is a sample code.
<script>
import {
BNavbarToggle, BNavItem, BNavbarBrand, BNavbar, BNavbarNav, BNavItemDropdown, BDropdownItem, BDropdownDivider, BAvatar, BCollapse, BNav, BContainer, BRow, BCol, BLink, BFormGroup, BFormInput, BInputGroupAppend, BInputGroup, BFormCheckbox, BCardText, BCardTitle, BImg, BForm, BButton,
} from 'bootstrap-vue'
export default {
components: {
BNavbarToggle,
BNavItem,
BNavbarBrand,
BNavbarNav,
BNavItemDropdown,
BDropdownItem,
BDropdownDivider,
BAvatar,
BCollapse,
BNavbar,
BNav,
BContainer,
BRow,
BCol,
BLink,
BFormGroup,
BFormInput,
BInputGroupAppend,
BInputGroup,
BFormCheckbox,
BCardText,
BCardTitle,
BImg,
BForm,
BButton,
},
}
</script>
In a laravel 5.4 environment I want to render the text "Example" in the .panel-heading of Example.vue. After doing npm run watch I get the following Vue warn:
'Property or method "message" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.'
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app',
data: {
message: 'Example'
}
});
Example.vue
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading" >{{ message }}</div>
<div class="panel-body">
I'm an example component!
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
app.blade.php
<html>
<!-- ... -->
<body>
<div id="app">
<example></example>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Your Example.vue component doesn't have access to its parent's properties. You need to define message within the same scope of the component you are trying to use it in.
You can do this by adding message as a data property in your Example component:
// Example.vue script
export default {
data() {
return {
message: 'Example',
}
},
}
Or you can pass it in as a prop:
// Example.vue script
export default {
props: ['message'],
}
In your case, you would pass a value for the message prop like this:
// in app.blade.php
<example message="Example"></example>
Here's the documentation on Vue Component props.