Is there any way to reload the sidebar component from other vue component ?
I got a menuLabel at the sidebar which will show the number of order in pending status. So I want to update the sidebar menuLabel whenever I change the status from pending to others.
For example, When I click submit or some button in SalesOrder.vue, I want to reload the sidebar.
Sample component code:
export const Routes = [
{
path: '/admin',
components: { default: ThemeContent, header: ThemeHeader, sidebar: ThemeSidebar, footer: ThemeFooter },
children: [
{ path: 'dashboard', component: DashboardAdmin },
{ path: 'salesorder', component: SalesOrder},
],
meta: { requiresAdmin: true }
},
You can separate 1st sidebar to external component and 2nd to another. Then include both components to your sidebar block and hide/show them whenever you want.
<sidebar>
<first-sidebar :trigger="boolean"></first-sidebar>
<second-sidebar :trigger="boolean"></second-sidebar>
</sidebar>
Then in your first sidebar component
<template>
<div v-if="trigger">
<!-- ... -->
</div>
</template>
<script>
export default {
props: ['trigger']
}
</script>
And finally second sidebar component
<template>
<div v-if="!trigger">
<!-- ... -->
</div>
</template>
<script>
export default {
props: ['trigger']
}
</script>
Thanks everyone for helping me, I have found a way for me to interact from one component to another which is using a bus event vuejs.
https://alligator.io/vuejs/global-event-bus/
Related
The Component is rendered correctly at first on initial render, however, when I press the router-link, it correctly changes the Component accordingly to routes given
const router = new VueRouter({
//mode: 'history',
routes: [
{
name: "Home",
path: "/",
component: HomeView
},
{
name: "Jobs",
path: "/jobs",
component: JobsView
}
],
linkActiveClass: "active",
linkExactActiveClass: "exact-active",
});
The router-view is implemented like this
Entry -> Game -> Content:
<template>
<div id="content" data-simplebar>
<NavigationBar />
<SettingsButton />
<router-view />
</div>
</template>
NavigationBar:
<ul class="navigation-bar__list">
<!-- Home Tab -->
<li class="navigation-bar__item navigation-bar__item--active">
<router-link class="navigation-bar__link" :to="{ name: 'Home' }">Home</router-link>
</li>
<!-- Jobs Tab -->
<router-link :to="{ name: 'Jobs' }">
<li class="navigation-bar__item">
Jobs
</li>
</router-link>
</ul>
So whenever I press the link, I can confirm that it works from VueDevTools, it places the appropriate component, but does not render it. No html is visible, plus after changing component, it places it as last child in parent element and not where router-view was originally located.
in devtools you can see that JobViews is there, and should be shown in the middle of the page, but it's not. Unless I refresh the page
P.S. I probably could have found the solution myself, but I'll give someone the opportunity to earn some internet points. Also, this is my first ever post on stackoverflow in 6 years of development. Cheers!
I know I can register global components in the file located in resources/js/app.js.
I know when I do this I can use these component in any place (because they are global).
But I don't want that. I have a big application and different functionalities solved in different routes. So I don't want the whole components available in all my views.
How can I register locally the components I want to be available only in one view?
Thanks
Vue js register component in local:
step-1 ) storing the component object in a variable:
var demo = {
data: function() {
return {
message: 'This is a local components.'
};
},
template: `
<div>
<h1>Component: {{ message }}</h1>
</div>
`
};
Step-2 ) Add a component property with the components that we want to register locally.
new Vue({
el: '#app1',
components: { /*Here we have added property*/
'demo': demo
}
});
Step-3 ) Template
<div id="app1">
<demo></demo>
</div>
*Notice: This property should be an object and contain key-value pairs of tag names and configuration objects.
You can do it by importing the component in your parent vue component
<template>
<div>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from '#/folder/ChildComponent'
export default {
components: {
ChildComponent
},
}
</script>
Here is the approach that I follow.
Create a new file in your components folder in resources/js/components/YourComponent.vue
<template>
<div>
<h2>My awesome component</h2>
</div>
</template>
<script>
export default {
}
</script>
And in the view where you want the component, you can import it like below
<template>
<div>
<h2>Import another component</h2>
<awesome-component></awesome-component>
</div>
</template>
<script>
import awesomeComponent from "./components/YourComponent.vue";
export default {
components: {
'awesome-component': awesomeComponent
}
}
</script>
I have a for that will create a component for each index.
In this component, I have a child div containing edit, add, minus buttons.
I would like it to be displayed on the component mouseover.
How do I achieve this dynamically without having to play with indexes ?
Thank you kindly.
Post component
<template>
<div v-on:mouseleave.native="showOperations = false"
v-on:mouseover.native="showOperations = true">
<!-- post data -->
<div v-if="showOperations">
<!-- operations -->
</div>
</div>
</template>
<script>
export default {
...
data () {
return {
showOperations: false
}
},
...
</script>
List of post
<post v-for="post in posts"
:key="post.id"
:post="post">
</post>
This pattern works for me and I think it works for you as well
I'm taking over a project that has a lot of AJAX loaded HTML snippets. I want to progressively introduce Vue.js where I can. I'm not trying to async load any component definitions or javascript, but I would like to load an HTML snippet that has a v-on:click binding like this:
<button class="btn btn-primary" v-on:click="showModal=true">
Show Modal Dialog
</button>
Is there anyway for vuejs to parse html snippets that come down from jQuery and read the v-* attributes?
You can use <v-runtime-template> to load Vue template strings at runtime:
<template>
<div id="app">
<template v-if="template">
<v-runtime-template :template="template"></v-runtime-template>
</template>
<div v-else>Loading...</div>
</div>
</template>
<script>
export default {
data() {
return {
template: ''
}
},
mounted() {
this.template = this.getVueTemplateFromServer();
},
methods: {
getVueTemplateFromServer() { /*...*/ }
}
}
</script>
demo
I'm starting to play around with vue.js on top of the laravel framework.
But im having trouble with rendering of a component which is imported.
My app.js (main entry point)
// app.js
var Vue = require('vue');
var Router = require('vue-router');
Vue.use(Router);
var router = new Router();
var ContractsOverview = Vue.extend({
template: '<p>contract page</p>'
});
var ContractDetail = Vue.extend({
template: '<p>detail page</p>'
});
import DashboardView from './app/components/DashboardView.vue';
router.map({
'/dashboard': {
component: DashboardView
},
'/contracts': {
component: ContractsOverview
},
'/contracts/:id': {
component: ContractDetail
}
});
var App = Vue.extend({
});
router.redirect({
'*': '/dashboard'
});
router.start(App, '#reminder-app');
This is my Dashboard component
(located at resources/assets/js/app/components/DashboardView.vue)
<template>
<section class="content-header">
<h1>
Dashboard
<small>Control panel</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li class="active">Dashboard</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<!-- .. some html -->
</section>
</template>
<script>
export default {}
</script>
and in my master layout i have a normal blade template with the <router-view></router-view> tag at one point.
At the end i build my app.js with laravels elixir and the following gulpfile:
var elixir = require('laravel-elixir');
elixir.config.js.browserify.transformers.push({
name: 'vueify',
options: {}
});
elixir(function(mix) {
mix.less(['bootstrap.less', 'app.less']);
mix.scripts([
'admin-lte/plugins/jQuery/jQuery-2.1.4.min.js',
'admin-lte/plugins/jQueryUI/jquery-ui-1.10.3.min.js',
// some more scripts,
'admin-lte/app.js',
'admin-lte/pages/dashboard.js',
'admin-lte/demo.js'
], 'public/js/ui.js');
mix.browserify('app.js');
});
When i go to the page the routes /contracts and contracts/:id the templates are shown as expected.
But when i go the /dashboard route, i dont see anything (besides the layout).
Am I missing something? Did I forget to import or require something?
Ok, i spent at least 4 hours finding my error, but it was just a simple typo somewhere.
But if you run gulp inside the virtual machine (homestead), you dont get the same output as if you run gulp locally. On my local machine it told what went wrong.
Also gulp watch doesn't work on the homestead machine.