In the following scenario, when I click the first div childDiv is always marked as undefined Because methodB returns false, if at some point methodB returns true and childDiv is rendered, when I click the first div again childDiv is still undefined.
<div (click)="someMethod(); childDiv.click()">
...
</div>
<div *ngIf="methodB()"
<paper-chip #chip label="Hello">
<span #spanChip>
H
</span>
</paper-chip>
<div id="childDiv" #childDiv (click)="chip.label='Bye'; spanChip.textContent='B''>
What can I do so that if methodB returns true childDiv it is not undefined?
Why invoking childDiv click, when you can simply call its click method?
Try something like this:
<div (click)="someMethod(); if (methodB()) someOtherMethod()">
<div *ngIf="methodB()" id="childDiv" #childDiv (click)="someOtherMethod()'</div>
</div>
Related
I have the following divs and want that when clicking on id="child" it should NOT execute a get to "/modal/closed" and NOT replace the id="modal". That is, do nothing HTMX related.
<div id="modal" hx-trigger="click"
hx-swap="outerHTML" hx-target="#modal" hx-get="/modal/closed" hx-params="none">
<div id="child">
</div>
</div>
Right now I have it working using the trigger "click consume" but need to specify an hx-get to an HTTP path that returns nothing (/nop).
Is there a cleaner way to do this?
<div id="modal" hx-trigger="click"
hx-swap="outerHTML" hx-target="#modal" hx-get="/modal/closed" hx-params="none">
<div hx-trigger="click consume" hx-swap="none" hx-get="/nop">
</div>
</div>
This can be solved using the event modifier "target:#modal" to indicate we are only interested on the click event originated from the id="modal".
This way clicks over id="child" that bubble up to id="modal" will be ignored.
<div id="modal" hx-trigger="click target:#modal"
hx-swap="outerHTML" hx-get="/modal/closed" hx-params="none">
<div id="child">
</div>
</div>
It works this way due to attribute inheritance in htmx https://htmx.org/docs/#inheritance. Placing the hx-trigger attribute on the outer-most div, means that element will listen for the event in all of it's children. When you add the same attribute to a child div with the consume modifier it stops the event bubbling up.
So the solution here would be to remove the hx-trigger from the outer div. In fact, if what you are trying to do is close a modal, you can add a close button somewhere else in the div. Something like this:
<div id="modal">
<button id="close" hx-trigger="click"
hx-swap="outerHTML" hx-target="#modal" hx-get="/modal/closed" hx-params="none">Close</button>
<div id="child">
</div>
</div>
Now when you click on the child div the event bubbles up and it's not caught by the sibling close button.
I do have a for loop and inside i want to have a modal for each image
<div class="col pb-3" v-for="(item, index ) in img" :key="index" style="width: 300px;height:auto;">
<img v-b-modal="'modal-'+index" :ref="'image'" #mouseover="mouseOver" #mouseleave="mouseOut" /><br>
<b-modal :id="'modal-'+index" title="BootstrapVue">
<p class="my-4">Hello from modal - {{index}}</p>
<img :ref="'imagex'" />
</b-modal>
<div class="progress pt-2 mt-1" style="width: 100px;margin: 0 auto;">
<div class="progress-bar " :style="[{'width':width[index]+'px'}]" role="progressbar"
aria-valuenow="0" ref="'progress'" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
In methods i am giving src value to each image that has :ref="'image'" and i can actually give a src to them its work fine but, i also want be able to give src value images in modal. Its called :ref="'imagex'" but its undefined.
this.$refs.image[i].src = event.target.result //works
this.$refs.imagex[i].src = event.target.result //undefined
What is the problem an is there anyway to solve it ?
When used on elements/components with v-for, the registered reference will be an Array containing DOM nodes or component instances.
An important note about the ref registration timing: because the refs themselves are created as a result of the render function, you cannot access them on the initial render - they don’t exist yet! $refs is also non-reactive, therefore you should not attempt to use it in templates for data-binding.
.
can use it in events and only at mounted function.
https://v2.vuejs.org/v2/api/#ref
I am trying to get all images for a category using Vue
<div class="col-md-12 col-sm-2 p-2">
<a v-on:click="onCategoryManageImageClick($event)" data-target="#location-
category-images">
</span>
</a>
</div>
So the event onCategoryManageImageClick ($event) does not work, if I am adding a html block and then click on get image button.
this is index.js
methods:{
onImagesTabClick(){
this.$root.$emit('activated-tab:location-images');
},
onCategoriesTabClick(){
window.j1App.eventBus.$emit("j1-location-image-list:shown");
},
onCategoryManageImageClick: function(event) {console.log('working event..');
event.preventDefault();
window.j1App.eventBus.$emit("j1-location-category-image-
list:shown",event.currentTarget.id);
}
}
So basically it need to to work like we do in jQuery
$(document).on('click',function{
})
So it works either page load or if adding any new html element on DOM. same I want in Vue.
You cannot alter the Vue template outside of Vue. That won't work. Vue compiles the template once when starting up and adds the event listeners to the rendered elements. If you add elements afterwards, Vue will not know about them.
The correct way of doing this would be to add those new elements in Vue.
<div
class="col-md-12 col-sm-2 p-2"
v-for="item in items"
:key="item.id"
>
<a
v-on:click="onCategoryManageImageClick($event, item)"
data-target="#location-category-images"
>
</a>
</div>
See https://v2.vuejs.org/v2/guide/list.html for documentation. In this case you need the items array variable in data and add more array elements to it, if you need more links.
Try raplacing your a tag with p
<div class="col-md-12 col-sm-2 p-2">
<p v-on:click="onCategoryManageImageClick" data-target="#location-
category-images">
</p>
</div>
I am getting issue while display another component on click event, here is my code:
<div (click)="showThis = true"></div>
<div class="" [ngClass]="{'hide': showThis}"></div>
<div class="" [ngClass]="{'show': showThis}">
<another-screen></another-screen>
</div>
its displaying both, first should display without any click, if click event then this hide first and another component will display
means hide and show class will apply
any help
Thanks
Why you don't use hidden:
<div (click)="showThis = true"></div>
<div class="" [hidden]="!showThis"></div>
<div class="" [hidden]="showThis">
<another-screen></another-screen>
</div>
*ngIf removes the html element from DOM but [hidden] is use for display none or block html element same as hide and show
Why not use *ngIf
<div (click)="showThis = true"></div>
<div *ngIf="!showThis "></div>
<div *ngIf="showThis ">
<another-screen></another-screen>
</div>
I have a menu button with a click event in Vue. When the button is clicked, it's supposed to activate the menu itself. This is the parent element which when clicked activates the menu (the toggleMenu function makes menuIsActive true). This part works fine:
<div class="navbar-item has-dropdown #click="toggleMenu">
<div class="navbar-link"></div>
<app-navmenu :class="{'is-active': menuIsActive}"/>
</div>
And this is the app-navmenu component that gets rendered:
<div class="navbar-dropdown" #click.stop>
<div class="container is-fluid">
<div class="column">
<h1 class="title">Title</h1>
<router-link class="navbar-item" :to="route" exact>
<div class="navbar-content">
<p class="has-text-info">info</p>
<small>meta info</small>
</div>
</router-link>
</div>
</div>
</div>
The problem I am running into is that I don't want the menu to disappear when I click on the actual navbar-dropdown div element, hence why I have a #click.stop. However, I do want the menu to disappear when I click on a router-link element, but since I have #click.stop in the navbar-dropdown element, the menu persists. If I don't have a #click.stop event on the navbar-dropdown element, then the menu disappears as soon as the navbar-dropdown element is clicked on, which I don't want.
How can I have the menu persist when clicking on the dropdown body, but also have it disappear when I click on a router-link? I've tried other click methods like .self and .prevent, but those don't seem to do what I need.
I am exactly not sure with your requirement, but following your comment, you can use something like this:
This will even push to the router link:
<router-link class="navbar-item" :to="route" exact
#click.native.prevent="callYourMethod">
This will prevent to go to the router link:
<router-link class="navbar-item" :to="route" exact
#click.native.prevent="callYourMethod" event="">
This is what I ended up doing to fix my issue. First, I moved the click function in the parent to one of its children:
<div class="navbar-item has-dropdown">
<div class="navbar-link" #click="toggleMenu"></div>
<app-navmenu :class="{'is-active': menuIsActive}"/>
</div>
This lets the body of the menu stay active even when I click on the body without having to use a #click.stop. Then in the menu itself, I did this so that links will close the menu:
<div class="navbar-dropdown" #click.stop>
<div class="container is-fluid">
<div class="column">
<h1 class="title">Title</h1>
<div #click="toggleMenu">
<router-link class="navbar-item" :to="route" exact>
<div class="navbar-content">
<p class="has-text-info">info</p>
<small>meta info</small>
</div>
</router-link>
</div>
</div>
</div>
</div>
One strange behavior I noticed is that if I put the #click="toggleMenu" function in the <router-link/> element itself, it doesn't get called on, even if I use .prevent. Hence the need for the div wrapper around the router-link element.