When I switch between two different charts(that both have different series and options) from ApexChart using v-if that have different chart options set there is some kind of bug that does makes the changed chart not render correctly.
<apexchart v-if="switch1" :options="chartOptions1" :series="series1"></apexchart>
<apexchart v-else :options="chartOptions2" :series="series2"></apexchart>
So for example I have chart options that has fill set and one without. When I switch between them both have fill (the one that didnt have takes the fill options from the other).
Here is the example of this behaviour:
https://codesandbox.io/s/line-with-upper-and-lower-band-apexchart-slhbs?file=/src/components/ChartBasic.vue
Anyone has idea how to fix this?
So thanks to #pkorhone suggestion I managed to find current workaround for this matter is to use v-show instead of v-if and change the height of the other chart by a little bit so that it somehow forces the chart to rerender:
<apexchart v-show="switch1" height="400" :options="chartOptionsBands" :series="seriesBands"></apexchart>
<apexchart v-show="!switch1" height="401" :options="chartOptions" :series="series"></apexchart>
Related
this is a question about best practices, in short: what is the best way to implement this function
I used the vue cli to create a project to train on. And so the normal template it provided me with was a side header thing with the content on the side, and so I made some modifications:
the issue is visualized down if the text explaination wasn't clear
and so what I had in mind was to add a slot in the header "the left side" to add the adding button, and the button wouldn't need to be visible in the other tabs, like the help tab.
App.vue
<template lang="pug">
TheHeader
routerView( v-slot="{ Component }" )
transition( name='slide-fade' mode='out-in' )
component( :is="Component" )
</template>
but here comes the issue, as you can see the tabs are in router views and the router view is beside the header component. the solution I had in mind was to:
add a list of strings in the App.vue with ["help", "course", ...] in the script section
the strings are linked to what router is being used (not very sure how to do this but I guess I could do a v-model to the v-slot being used)
pass the string to the header component
include a v-if statement with every tab's little widget
but I felt like this alone will jank the code a lot and thought if maybe there was an easier way to pass an entire component from one child to another it would be great. if there isn't I'd just like to know if it's the best practice I could do and proceed with this solution
issue visualization:
wanted behavior mock-up:
the solution was to use the Built In <Teleport> Vue component. this way I just type <Teleport to="..."> and it will go where I want
Okay, so I am trying to setup a simple grid layout with three v-cards at equal distances.
<v-main>
<v-container>
<v-row>
<v-col>
<v-card outlined tile>Card 1</v-card>
</v-col>
<v-col>
<v-card outlined tile>Card 2</v-card>
</v-col>
<v-col>
<v-card outlined tile>Card 3</v-card>
</v-col>
</v-row>
</v-container>
</v-main>
Now, according to the docs and examples they have this should leave me with 3 cards at equal distances, and it does indeed.
Problem is that moment I hover over any of them, they all darken. Looking through the dev tools reveals following issue:
As you can see, the v-cards are not inside v-cols as they should be. Yet, I can't see any errors in the code. Am I missing some extra rule or something?
I believe the problem with darkening on hover should be elsewhere and is not related to the oddity that you see in the Vue debugger. I don't think there is something wrong with your code (compare it to what I mention in #1 below). I tend to believe that the oddity in the debugger is either its own bug or a bug (or feature?) related to how the debugger reflects the Vuetify internals, which doesn't spoil the real app behavior. Here are my arguments:
Look at Vuetify grid with cards example - it is structured the same way as your example (ignore their 'cols' attribute of v-col tag - they showcase an uneven spread of columns, and if you remove that attribute you get pretty much your own example with 3 cards, each inside of its own v-col). However, if you try to copy-paste this standard Vuetify example into an empty Vue CLI app and look into the debugger you see the same odd hierarchy. Check my screenshot: This, however, doesn't spoil the DOM model, where the v-cards are inside of v-cols as expected: This also doesn't create any problems with the actual app behavior. Changing background color at hover (I added that simple CSS change to Vuetify original example just to try to reproduce your original problem) works like a charm. Note that red background in one card of the screenshot - it spreads to the single hovered card only.
I remember seeing the same Vuetify hierarchy oddity in Vue debugger in the past, though it didn't create any problems and didn't seem to be caused by any bugs in the code. I just ignored it at that time.
I also copied your example into a codepen adding just two basic things: the CSS to test hovering (the same as I added in #1 above) and the basic Vue object creation and mounting (which I'd suppose you should have auto-generated).
The CSS:
.v-card:hover {
background-color: red;
}
The JS:
new Vue({
vuetify: new Vuetify(),
}).$mount('#app')
The hovering also works well in that codepen (if I understand correctly the kind of problem you mentioned). I should mention there is one difference in CSS to what I had to use in #1, though. In #1 a custom CSS class (<v-card class="imgCard">) was used as v-cards are inside of another high-level v-card there, so I couldn't use '.v-card' to highlight just one nested card there - they would all highlight together otherwise. BTW, isn't that the problem you experience by chance?
So overall, I think that either your original code has something else that causes the problem (presuming you might have simplified it when writing the question), or I didn't get what kind of hovering you mean. Anyways, I'm quite certain that the oddity in Vuetify debugger doesn't mean there is something wrong with the code itself.
I'm trying to style a Buefy button to look like a simple text-link.
For example, it is possible to use:
<b-button
tag="a"
type="is-text"
href="https://www.example.com"
>
Click here
</b-button>
This produces near the result I'm looking for, except I want to achieve a type such as is-text-red and is-text-blue to make the button appear as text of particular colours.
I could solve this by simply using:
Click here
Click here
But I want to use <b-button type="is-text-red"> to make an inline link.
Can anyone point me in a direction that involves Bulma CSS and/or Buefy CSS modifications that would achieve this?
I'm looking at the node_modules BButton component, and it looks like the type prop is passed through, so it looks possible to create a custom type somewhere that would be analogous to is-info and is-warning.
I would like to have text-only versions such as is-text-info and is-text-warning so I can use the button component to place inline anchor tags.
Stated concisely, how does a person add another type to <b-button> that provides arbitrary styling?
Check this link(https://buefy.org/documentation/customization/). You might need to define your own css overrides.
I need to remove the completely default animation from vue-select.
How to do it? I tried to replace the styles from the box with my own, but I didn’t get the result..
There is corresponding section in the docs, which states how to change transitions -
https://vue-select.org/api/props.html#transition
So, you can use it like this:
<v-select :options="options" transition="none"></v-select>
I created this NumberSpinner widget:
<input name="form_action_fy" id="form_action_fy" value="2010"
data-dojo-type="dijit.form.NumberSpinner"
data-dojo-smallDelta="1"
data-dojo-largeDelta="1"
data-dojo-constraints="{min:2010,max:2030,places:0}" />
When I load the page, the widget shows as expected. However, there are a couple of issues:
The value is empty and not 2010.
When I press the decrease button on the empty widget, I get 9000000000000000 and when I increase on the empty widget, I get -9000000000000000. It doesn't stick to the min/max specified.
And, the smallDelta and largeDelta do not work either.
What am I doing wrong here?
Thanks
Eric
In the new widget attribute style the properties that are passed to the constructor function are all put in the data-dojo-props attribute, instead of the ad-hoc attributes of old. In the cases where the docs still point to the older declarative style you might get better luck by looking for the programatic style examples instead.
<input name="form_action_fy" id="form_action_fy"
data-dojo-type="dijit.form.NumberSpinner"
data-dojo-props="
value:2010,
smallDelta:5,
largeDelta:10,
constraints:{min:2010,max:2200,places:0}"
/>
Live example: http://jsfiddle.net/missingno/cQfFt/
Do note that in Dojo 1.6 a couple of widgets are still in transition so some attributes might need to be duplicated in prop and attribute form. Things should be allright in 1.7 though.