I have v-for loop where I iterate over some clients and display some data. Inside this loop I have an element that needs to be styled initially based on the client data but on click this has to be toggled between true of false.
<div v-for='client in clients'>
<span class='heart margin-right-10'>
<i v-bind:class='[client.favourite?"fas fa-heart fa-lg hearted":"fal fa-heart fa-lg"]' v-on:click='change()'></i>
</span>
</div>
So initially client.favourite has a value of true, and on click this needs to be toggled between true or false.
How should I approach this so I can toggle between the two classes?
Well, if I understand your goal I will try with something as simple as possible like:
change() {
client.favourite = !client.favourite;
}
Related
I have an HTML element like below
<div v-if="showOriginalContent"> original content</div>
<div v-else> default content </div>
initial value of showOriginalContent is false
and from mounted method am calling an another method where i will make the value of showOriginalContent to true based on some conditions . Currently even if the showOriginalContent is true i can see that v-else is getting displayed for a fraction of seconds before v-if is rendered in the DOM . How can i solve this issue ? I tried to move the function call to all other life cycle methods but nothing is working . I have gone through before and after navigation approach in vue js ,Is it possible to apply that logic here?
I think it's normal if I understood correctly what you posed as the problem.
Because the mounted state is called when the view has already been OK and displayed and only once.
So a variable declaring in this method its change will not necessarily have an effect on what should be displayed.
Try to see the lifecycle in Vuejs for more detail.
Put it in computed or watch methods to see.
Use an outer div and control this div with another variable that will be true when you are done with your condition parts in mounted hook.. like this..
<div v-if="conditioncheckdone">
<div v-if="showOriginalContent"> original content</div>
<div v-else> default content </div>
</div>
It will resolve your issue of displaying v-else stuff while you are checking your conditions in mounted
turn the default showOriginalContent value to null instead of false
Is it possible to disable this blur call on the active element from SwiperJS in the onTouchStart event handler?
Some background:
For touch and desktop devices I'm using swiper for forms on swiper-slides. Within a form I'm using vue-select (a combobox).
The Problem: When the user selects an entry, the entry get not selected on the first time but on the second time.
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div>First form</div>
<v-select :options="selectionEntries"></v-select>
</div>
<div class="swiper-slide">
<div>Second form</div>
<v-select :options="selectionEntries"></v-select>
</div>
</div>
</div>
See also this example on codepen
I figured out that it seems to work correctly:
When I remove the blur-listener on the input field of the vue-select box. But it is used to close the selection list when the user leaves the field.
When I comment out this blur call in SwiperJS. I'm not sure why it is used there.
The first point is not an option, so is it possible to disable the blur call of SwiperJS via configuration?
Currently I'm using this workaround (SwiperJS V6.4.1):
const swiper = new Swiper(".swiper-container", {
// Workaround part 1:
touchStartPreventDefault: false
})
// Workaround part 2:
swiper.touchEventsData.formElements = 'notExistingHtmlTagName'
Part 1: To handle mouse down and click events on all elements, set the swiper parameter touchStartPreventDefault: false.
That will disable this code block: https://github.com/nolimits4web/swiper/blob/9dead9ef4ba5d05adf266deb7e3703ceb199a241/src/components/core/events/onTouchStart.js#L90-L97
Part 2: Set swiper.touchEventsData.formElements = 'undefined' to define nothing as formElements. That will disable the code block that calls blur: https://github.com/nolimits4web/swiper/blob/9dead9ef4ba5d05adf266deb7e3703ceb199a241/src/components/core/events/onTouchStart.js#L81-L88
Im want to use v-if statement to handle an event like this(If click a button and validate becomes true show a div):
<div v-if=btn v-on:click="validate">
<v-progress-linear
v-model="value"
:active="show"
:indeterminate="query"
:query="true"
></v-progress-linear>
</div> (...)
What´s the correct way to do this?
v-if respond to boolean value.
example:
if your v-model="validate" in inputCheckbox/Button or validate:true initialised under data() as validation state
then your v-if="validate" is enough
P/S: This sheet might save your troubles in future.
I have a primeng (angular 2) dialog with a dropdown. I want to set focus to the dropdown when the dialog shows. The problem appears to be that my div is rendered conditionally.
My code:
<p-dialog (onShow)="fe.applyFocus()">
<div *ngIf="selectedItem">
<button pButton type="button" (click)="fe.applyFocus()" label="Focus"></button>
<p-dropdown #fe id="reason" [options]="reasonSelects" [(ngModel)]="selectedReason" ></p-dropdown>
</div>
</p-dialog>
In this code the button works fine, but the onShow() (outside the *ngIf div) tells me fe is undefined.
How can I access the local variable inside the *ngIf?
Yes, this is a real pain. Unfortunately, due to the way *ngIf works, it completely encapsulates everything inside (including the tag it's on).
This means anything declared on, or inside, the tag with the ngIf will not be "visible" outside of the ngIf.
And you can't even simply put a #ViewChild in the ts, because on first run it might not be present... So there are 2 known solutions to this problem...
a) You can use #ViewChildren. This will give you a QueryList that you can subscribe to, which will fire off every time the tempalte variable changes (ie. the ngIf turns on or off).
(html template)
<div>{{thing.stuff}}</div>
<my-component #thing></my-component>
(ts code)
#ViewChildren('thing') thingQ: QueryList<MyComponent>;
thing: MyComponent;
ngAfterViewInit() {
this.doChanges();
this.thingQ.changes.subscribe(() => { this.doChanges(); });
}
doChanges() {
this.thing = this.thingQ.first;
}
b) You can use #ViewChild with a setter. This will fire the setter every time the ngIf changes.
(html template)
<div>{{thing.stuff}}</div>
<my-component #thing></my-component>
(ts code)
#ViewChild('thing') set SetThing(e: MyComponent) {
this.thing = e;
}
thing: MyComponent;
Both of these examples should give you a "thing" variable you can now use in your template, outside of the ngIf. You may want to give the ts variable a different name to the template (#) variable, in case there are clashes.
You can separate the use of template on NgIf level:
<ng-container *ngIf="selectedItem; else elseTemplate">
<p-dialog (onShow)="fe.applyFocus()">
<div>
<button pButton type="button" (click)="fe.applyFocus()" label="Focus"></button>
<p-dropdown #fe id="reason" [options]="reasonSelects" [(ngModel)]="selectedReason"></p-dropdown>
</div>
</p-dialog>
</ng-container>
<ng-template #elseTemplate>
<p-dialog>
</p-dialog>
</ng-template>
Given the following:
<div id="#my-container">
<div class="title">Companies</div>
<div class="tab active tab-apple">Apple</div>
<div class="tab tab-google">Google</div>
</div>
When page is loaded without any tab clicks yet, whichever tab with the default active class, needs to go in the .title div. For the example above, <div class="title">Apple</div>
On click of a tab, the class is switched to active, and vue.js needs to update the .title div once again.
How can this be done with vue.js? I've tried but not able to get it to work as intended.
The answer by David is one way to do it. But Vuejs offers in-line computations for this. So, no need to hook into any CSS event. Here's some code to explain:
Create a data property active_tab, just like David mentioned. And then bind it's value just like he's done it. In your tabs, add an click event and at that event, assign appropriate value to active_tab.
<div class="tab active tab-apple" #click="active_tab = Apple">Apple</div>
<div class="tab tab-google" #click="active_tab = Google">Google</div>
Now, to dynamically assign the active class to the respective tab, make the class attribute, a computed property, like this:
<div
:class="['tab', active_tab == 'Apple' ? 'active' : '', 'tab-apple']"
>
Apple
</div>
What this code is basically doing is, :class makes class a computed property. Then the commas in the array divide the statement. So, the computation will always add tab and tab-apple classes. But, only if active_tab == 'Apple' then ? add 'active' else : add ''
Not sure which CSS framework you are using, but normally I hook into the events thrown by the tab switching (many CSS frameworks provide this access). Once hooked into it, you can write a Vue custom directive that will take that event and use it to update a VM attribute that indicates which tab is active.
Then you can use normal mustache templating to get it into your template:
<div class="title">{{ active_tab }}</div>