I am suing https://github.com/DominikSerafin/vuebar directive in my project. Now depending on some var i want to use it in html or not.
Like this
<div v-bar>
//this div contains huge html like 1200 lines of code and doing
// v-if is not option since i will have to duplicate all of its content
</div>
So to sumarize:
<div v-bar v-if="somevar"></div> // is not and option bceuse that div contains 1200 of code
Is there any way that i can say something like:
<div some_var ? v-bar:''></div>
Or to make my directive that sort of inherits that v-bar and renders?
Actually you can do one thing. Use Directive Hook Arguments.
You can put your condition based on the hook arguments inside the directive's code. And you can make sure the those hook arguments are reactive so that it could change when you want it to.
Write you logic whether to do something or not for directive inside the directive's code depending upon the binding values.
Read this, please comment if you are not clear.
No, there is no way to apply directive with some condition.
But you can try to create and destroy custom scroll bar programatically, from docs:
Public methods.
You can access them from your component context: this.$vuebar.
Alternatively you can access them from your main Vue instance:
Vue.vuebar. Every method needs to have passed Vuebar scroll container
element as the first argument. You can do that easily using $refs.
initScrollbar(DOM Element, options)
getState(DOM Element)
refreshScrollbar(DOM Element, options)
destroyScrollbar(DOM Element)
Related
I want to change some part of the site based on selected language without any refresh. All worked but I have tried multiple ways to bind background-image dynamically on no refresh site language change (i18n). But no success.
<div :style="{'background-image' : mainBackground}">
test div
</div>
I have created a computed to return currently used link based on language.
mainBackground(){
return this.isTurkishSite ? 'url(/images/home/home_bg_main_tr.jpg);' : 'url(/images/home/home_bg_main.jpg);'
}
But after change site language by dropdown all other elements src are updated to use the selected language image file. But only this background path is not updating. Also style attribute is deleted on the element itself. I can not figure out why this solution not worked properly. Also rendered mainBackground computed into the div element. And returned link is updated based on language.
I have solved the problem by using class binding. 1 class for Turkish lang, and main class for all other languages. And used them in conditional class binding. Solution:
:class="[isTurkishSite ? 'bg-turkish' : '']"
It's not working because of the semicolons you put at the end of url() directives, css rules set in object notation with Vue don't require semicolons :)
I am using tag-based routing with RiotJS. If the tag in the route contains an other tag, it is automatically mounted. Which is great in some cases. But there are cases when I need to pass some options to the tag being mounted, that can't be passed as tag property. I know that this.tags will contain them and I have the means to pass that parameter afterward. But I still am curious if there is a way to stop RiotJS automounting some subtags.
Sounds like you have a design error.
Remember that a tag can contain any classic JS code; you can simply write a logic that populates the tag in any time, way, shape or form. You can also hide it's content via the if condition until it is populated, while it is mounted. You can also hide it in the parent and prevent its mounting in the same manner if you so desire.
I am currently developing a web application that is used to display elements for events on a map provided by HERE Maps. I am using Vue.
I have some components, but the relevant component is the component HereMaps.vue which initializes the map using the HERE Maps Api.
The HERE Maps Api provides the possibility to place so called InfoBubbles on the map showing additional information. These InfoBubbles can be provided some HTML-code in order to customize their appearance.
Please refer to the documentation for additional information
Following the documentation the code looks something like this:
let bubble = new H.ui.InfoBubble(marker.getPosition(), {
content: "<div class='someClass'>Some Content</div>"
});
this.ui.addBubble(bubble)
This is happening after mount in the "mounted" method from Vue in the "HereMaps" component.
The Bubbles are added in a "closed" (hidden) form and dynamically "opened" to reveal their content when the corresponding marker icon on the map is clicked. Therefore the HTML-code is present on the DOM after the component is mounted and is not removed at a later stage.
Now instead of supplying custom code within each bubble added to the UI i want to just add a component like this:
let bubble = new H.ui.InfoBubble(marker.getPosition(), {
content: "<myDynamicComponent></myDynamicComponent>"
});
this.ui.addBubble(bubble)
It does not matter to me wether the component is initialized using props or if it is conditionally rendered depending on the state of a global variable. I just want to be able to use the "myDynamicComponent" in order to customize the appearance in a different file. Otherwise the design process gets very messy.
As far as i know this is not possible or at least i was not able to get it work. This is probably due to the fact that the "myDynamicComponent" is not used within the "template" of the "HereMaps" component und thus Vue does not know that it needs to render something here after the directive is added to the DOM in the "mounted" method.
This is what the InfoBubble looks using normal HTML as an argument:
This is what the InfoBubble looks using the component as an argument:
It appears to just be empty. No content of the "myDynamicComponent" is shown.
Does anyone have any idea how i could solve this problem.
Thank You.
Answer is a bit complicated and I bet you wouldn't like it:)
content param can accept String or Node value. So you can make new Vue with rendered your component and pass root element as content param.
BTW, Vue does not work as you think, <myDynamicComponent></myDynamicComponent> bindings, etc exists in HTML only in compile time. After that all custom elements(components) are compiled to render functions. So you can't use your components in that way.
Give us fiddle with your problem, so we can provide working example:)
I have place objects that look like this:
"london" : {
capital: true,
images: ["pic1.jpg","pic2.jpg"],
...
}
They are retrieved from the backend and assigned to a place object in data.
The issue/question I have is how to handle the delay in retrieving the data from the backend when rendering the view.
My template might have something like this:
<p>{{place.images[0]}}</p>
but this causes errors/warnings in the console because there is no such thing as the images array until the data has been fetched.
I can think of two ways to handle this.
I define an empty images array within the data object. But I would have to do this for every property (and sub-property) that I will potentially use which isn't ideal.
I use v-if and a loading variable to conditionally render the template part.
Is there a "vuejs" approach to this that I've not considered?
I think you are looking for The v-cloak directive
This directive will remain on the element until the associated Vue
instance finishes compilation.
You have to use like
<p v-cloak>{{place.images[0]}}</p>
Read about v-cloak in docs, and more discussion
I have set up in Javascript my preferred dijit.Menu which is that far so good.
How am I able to display the dijit.Menu directly after the page starts up in the (with it's position) without any mouse interaction?! I have looked in the API so far and don't find the answers. Will I have to "overwrite" a method?
If yes, which one is it? And what do I have todo???
The widget will not show up until it is parsed by dojo.
You should place fake menu markup inside its dom node:
<div dojoType="dijit.Menu">
<h1>This text is shown after the dom is loaded
and until the menu is parsed and renered</h1>
</div>
As soon as menu is ready, everything you've placed inside menu's dom node will be replaced by actual widget's html.
NON-AMD Version:
dojo.ready(function(){
// The code for all items!
})
DOJO-AMD Version, put the parameters of the modules you like to add, in require as well give them a name in the functions parameters list:
require(["dojo/domReady!"],function(){
//natve code
});