I have a tabs component with a template of that kind:
<div class="tabnav">
<ul>
<li v-for="tab in tabs" v-text="tab.title"></li>
</ul>
<div v-for="tab in tabs" v-html="tab.content"></div>
</div>
New tabs will be added on-demand through an Ajax request. I wonder how I can have my content (tab.content) to be automatically mounted. The new tabs are created but if I have components in this content, they are not Vueified.
What is the right approach to get this dynamic content integrated in my existing component with its specific set of methods, data, etc...?
If the only solution is to make of each content a distinct component itself, must it be named? If not, how do I integrate it in the tab?
Related
I tried using a click event on a <router-link>. It works, but it is reloading the page everytime the link is clicked. I would like to avoid it but I can't figure out how.
I am aware that <router-link> does not accept a simple #click event. I saw on some forums that #click.I native would work, but as we know, that is deprecated.
So I would like to know if there is any solution other than wrapping the router link in a div and putting the listener on that div.
The reason why I want to do this is that I want to bind a class dinamicaly when the link is clicked. I have created a dropdown menu which is triggered onClick. But then when I follow a link inside that dropdown menu, the menu remains open. Therefore, I would like to have an additional #click event to dinamically bind a class (display: none) to the dropdown menu. The thing is that the items inside the dropdown are iterated which send parameters to a Vuex Mutation and therefore i can’t use regular tags and wrapping the router-links with a span or div is also not giving me the desired effect.
Thank you !
Regards,
T.
I have managed to solve the problem using a div wrapper and changing my css (that was preventing the code to work properly)
<div class="dropdown">
<a class="dropbtn" #click="dropClick"><i class="ri ico ri-draft-line"></i> Docs <i class="ri ico ri-arrow-drop-down-line ri-1x"></i></a>
<div class="dropdown-content" :class="{ 'dropdown-content-display': clicked }">
<div class="wrapper" v-for="route in $store.state.menuItems" :key="route.name" #click="dropClick">
<router-link :to="{ name: 'docs', params: { title: route.name } }"> <i :class="'ico ri ' + route.icon"></i> {{ route.name }}
</router-link>
</div>
</div>
</div>
If a understand your question, there is a "active-class" property on vue-router(router-link). You can set your classes dynamically by based on an active route.
I have a scenario where i have multiple containers with a header, then the list that will be used on vue.draggable and a footer.
I've managed to put the list part working with drag and drop between the multiple containers, but only if i drop them in the list area of the containers.
My ideal scenario would be for the drop to be possible in the entire container, so that i can drop a list item also in the header/footer (perhaps defaulting it to add it to position 0 of the list).
I've tried creating additional vue.draggable custom tags not only on the list items but also on the parent div, but it doesn't help, since now we can drag the whole parent div.
Here's the vue template for the base of the several containers that i have:
<template>
<div class="container">
<div class="header">
<p>{{header}}</p>
</div>
<div class="body">
<draggable class="drag-area" :list="items" group="default">
<div v-for="item in items" :key="item.id">
<drag-item :item="item"></drag-item>
</div>
</draggable>
</div>
<div class="footer">
<p>{{footer}}</p>
</div>
</div>
</template>
Is there any way to be able to drag the drag-item to the whole container? Namely dropping it in the header/footer?
I'm using vue 2.6.10 and vuedraggable 2.23.0
Setting :empty-insert-threshhold="100" will increase the drop radius to make it easier to drop items into a list.
<draggable
tag="ol"
:empty-insert-threshhold="500"
v-model="list"
...
>...</draggable>
New to VueJS... I have a component that I want to pass other components into based on the selection made in a dropdown. I have a main template that will always be rendered on the screen, part of which has a dropdown. When I make a selection in that dropdown I want to have a div inside that main component with an ID (or some other identifying property) and push another template inside of it. I'm thinking that a slot does the opposite of what I want..
Original Template:
<div class="search-field-with-label-container">
<el-select v-model="serviceType">
<el-option
v-for="serviceType in serviceTypes"
:key="serviceType.id"
:value="serviceType"
>{{ serviceType }}</el-option>
</el-select>
<div id="thisIsWhereIWantMyOtherTemplateToRender"
</div>
Second template:
<template>
<h1>this is the other template</h1>
</template>
You can use dynamic components with the keep-alive tag.
<keep-alive>
<component v-bind:is="selectedComponent"></component>
</keep-alive>
Documentation is here.
I have a modal.vue component as follows:
<template>
<transition name="modal-transition">
<div class="modal-body" v-if="displayed">
<div class="modal-overlay" #click="displayed = false"></div>
<div class="modal-content">
<slot/>
</div>
</div>
</transition>
</template>
How do I mount this component to the applications root element rather than in place?
For crude inaccurate example:
<body>
<div id="app">
<div class="header"></div>
<div class="nav"></div>
<div class="stage">
<div class="sub-nav"></div>
<div class="content">
<modal :display.sync="display">MY MODAL</modal> <-- Don't mount here...
</div>
</div>
<-- Mount here instead...
</div>
</body>
The current issue is that my sites header and navigation is layered on top of my modal and it's darkened full screen overlay instead of layered behind the modal overlay.
Update for Vue 3
There is now a built in feature called teleport which allows mounting parts of your component template to any DOM element.
The example from the OP would look like something like this
<!-- MyModal.vue -->
<template>
<transition name="modal-transition">
<div class="modal-body" v-if="displayed">
<div class="modal-overlay" #click="displayed = false"></div>
<div class="modal-content">
<slot/>
</div>
</div>
</transition>
</template>
<!-- SomeDeeplyNestedComponent.vue -->
<template>
<teleport to="#app">
<!-- Can still receive props from parent -->
<MyModal :my-prop="foo">
<!-- slot content -->
</MyModal>
</teleport>
</template>
Vue 2
Move the elements own self to the element of applications root may be achieved in two ways, Using a portal as a preferred solution or using an append.
Using a Portal (Preferred Method)
PortalVue is a set of two components that allow you to render a
component's template (or a part of it) anywhere in the document - even
outside the part controlled by your Vue App!
https://portal-vue.linusb.org/
Using an Append (Not best practice)
If adding a portal library is too heavy, using an append is allowed but lightly discouraged officially in the VUE docs.
Typically this particular mount position will satisfy a z-index overlay for your own modal or dialog popup that you require to render over the top of the entire app. You can always substitute this.$root.$el in this example for a different element target using standard getElementBy or querySelector functions.
Here the element is being moved not destroyed and re-added, all reactive functionality will remain in tact.
<script>
export default {
name: 'modal',
...
mounted: function() {
this.$root.$el.append(this.$el);
},
destroyed: function() {
this.$el.parentNode.removeChild(this.$el);
}
}
</script>
On mounted the element is moved inside of where the top level VUE app instance is mounted.
On destroyed removes the placeholder DOM comment for the migrated component from the new parent to prevent orphaned duplication each time the component remounts it's self.
VUE officially states not to destroy an element outside of VUE so this is not to be confused with that statement, here the component has already been destroyed.
This DOM comment duplication will typically happen when for example switching views with vue-router as this mechanism mounts and dismounts all components in a router view each time vue-router view state changes.
This behaviour is a bug cause by vue-router, the object is destroyed properly by VUE render manager but an index reference remains by mistake, using a portal package resolves this issue.
Here is the result:
As per example given in aurelia documentation I am opening dialog box with viewmodel (say prompt ). This prompt has view inside in which I am adding "router-view" tag.
My routes are already configured. So when first time I open dialog it opens correct views as configured in routes and everything works well. But when I close dialog and re-opens dialog, It's not showing first route view. If I click other route link and come back to first route it works.
I have observed it's not creating instance of view model of first route( when opened dialog second time).
How to fix this issue?
Prompt html
<template><div class="row">
<left-menu ></left-menu>
<router-view></router-view>
</div></template>
<template>
and left-menu.htm
<template>
<div class="list-group">
<template repeat.for="item of items">
<a class="list-group-item ${$parent.selectedNav === item.routeName ? 'active' : ''}" route-href="route.bind: item.routeName;" click.delegate="$parent.select(item)">${item.text}</a>
</template>
</div>
Using a router inside a modal window seems off to me. The router is used to manage pages, but a modal is used to manage content within a page.
I would suggest building a modal window component, you can use <slot> tags to inject content and set it's model bindings to any data within the current view model.
Here's an example of my component that I use for this.
<template>
<div show.bind="visibility" class="modal-window">
<div>
<button class="btn btn-danger btn-sm close-button" click.delegate="close()">close</button>
</div>
<slot></slot>
</div>
<div show.bind="visibility" class="modal-window-overlay" click.delegate="close()"></div>
</template>
-
import { bindable } from 'aurelia-framework';
export class ModalContent {
#bindable visibility: boolean;
close(){
this.visibility = false;
}
}
<modal-content id.bind="'add-variant-window'">
<h4>Modal Content</h4>
<div>you can bind this to things on the current viewmodel</div>
</modal-content>